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

您需要将对象作为第二个参数传递给props中的navigation方法。要将数据传递到其他组件，请提供一个对象作为导航功能的第二个参数

更改此

 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
});

现在在要将数据传递到的组件中，您可以使用react-navigation的getKey方法获取键

TargetComponent.js

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

通过反应导航将数据从一个屏幕传递到另一个屏幕

1 个答案: