Передача данных с одного экрана на другой с помощью реагирующей навигации

Question

В настоящее время я передаю данные одному компоненту в react-native с некоторым кодом, который показан ниже:

class Login extends Component {
  signInWithGoogle = async () => {
    try {
      const result = await Google.logInAsync({
        iosClientId: IOS_CLIENT_ID,
        androidClientId: ANDROID_CLIENT_ID,
        scopes: ["profile", "email"]
      });

      if (result.type === "success") {
        console.log(
          "LoginScreen.js.js 21 | ",
          result.user.givenName,
          result.user.familyName,
          result.user.email,
          result.user.photoUrl
        );
        this.props.navigation.navigate(
          "MyDrawer",
          (username = result.user.givenName),
          (lastname = result.user.familyName),
          (email = result.user.email),
          (photoUrl = result.user.photoUrl)
        );
        return result.accessToken;
      } else {
        return { cancelled: true };
      }
    } catch (e) {
      console.log("LoginScreen.js.js 30 | Error with login", e);
      return { error: true };
    }
  };
}

У меня вопрос как передать данные другому компонент

Answer 1

вам нужно передать объект в качестве второго параметра методу навигации, который находится в реквизите. чтобы передать данные другому компоненту, укажите объект в качестве второго аргумента для функции навигации

измените это

 this.props.navigation.navigate(
          "MyDrawer",
          (username = result.user.givenName),
          (lastname = result.user.familyName),
          (email = result.user.email),
          (photoUrl = result.user.photoUrl)
        );

на

 this.props.navigation.navigate("MyDrawer",{
  name: result.user.givenName,
  lastname : result.user.familyName,
  email :result.user.email,
  photoUrl = result.user.photoUrl
});

, теперь в Компонент, которому вы передаете данные, вы можете получить ключи, используя метод getKey реагировать-навигации

TargetComponent. js

render() {
    email = this.props.navigation.getParam("email", defaultValue);
  password= this.props.navigation.getParam("password", defaultValue);
}