从app.js到其他文件的反应本地传递道具

Question

我正在尝试将设备令牌从我的app.js传递到react-native中的登录组件。

我正在尝试这样的事情：

这是我的app.js：

const RootStack = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions :{ headerLeft: null}
    },
    Tab: {
      screen: Tab,
      navigationOptions :{ headerLeft: null }
    }
  },
  {
    initialRouteName: 'LoginScreen'
  }
);
const MyApp = createAppContainer(RootStack);
 constructor(props) {
    super(props);
      this.state = {
        token: ''
      }
  }
  async componentDidMount() {
    this.state.token = await firebase.messaging().getToken().then(token=> { return token;});
    this.checkPermission();
    this.createNotificationListeners();
  }
render() {
      return (
        <MyApp token={this.state.token}></MyApp>
      );
    }

和我的登录：

export default class LoginScreen extends React.Component {
   constructor(props) {
    super(props);
      this.state = {
        mail:"",
        password: "",
        token: this.props.token
      }
  }
  async Login(){ 
console.log(this.state.token)
}
}

当然是不起作用的，我不知道如何通过组件或不使用.navigate（）通过stacknavigator传递令牌。除了我用单个字符串填充句子外，它也无法正常工作，所以我做错了什么？令牌会有所不同吗？

Answer 1

screenprops

您需要使用screenProps。您应该检查文档以查看更多信息。

这就是我在您的情况下使用它的方式。

<MyApp screenProps={{ token: this.state.token}} />

然后，您可以使用this.props.screenProps.token。

在屏幕中访问它

这是我创建的零食，它显示通过导航器的传递值。https://snack.expo.io/@andypandy/passing-props-though-a-navigator

在您当前的LoginScreen中，您正在尝试在该州设置令牌的值。请记住，您的页面可能是在创建令牌之前构造的，因此可能不存在令牌的初始值，因此您可能更喜欢在componentDidUpdate中捕获该值，请参见DOCS。

另外，您可以将令牌存储在Asyncstorage中。

firebase

从Firebase获取令牌时，您将混合promises和async/await表示法。选择一个符号并坚持下去。

您正在错误地设置状态。您正在使用线路变异状态

this.state.token = await firebase.messaging().getToken().then(token=> { return token;});

您不应突变状态，因为它会被覆盖，并且可能会导致您不期望的副作用。您应该使用this.setState({token});将令牌值设置为状态。

这就是我的componentDidMount

重构的方式

async componentDidMount() {
  // await functions can throw so always wrap them in a try/catch
  try {
    // get the token from firebase https://rnfirebase.io/docs/v5.x.x/messaging/device-token
    let token = await firebase.messaging().getToken();
    if (token) {
     // if we have a token then set the state and use a callback
     // once the state has been the callback calls checkPermissions and createNotificationListeners
     this.setState({token}, () => {
       this.checkPermission();
       this.createNotificationListeners();
     });
   }
  } catch (err) {
    console.log(err);
  }
}

其他阅读

迈克尔·陈（Michael Chan）的以下文章是一个很好的介绍。https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6

以下文章显示了promises和async/await的差异https://medium.com/@bluepnume/learn-about-promises-before-you-start-usis-sashc-await-eb148164a9c8