Question

我正在尝试将设备令牌从App.js传递给react-native的Login组件。

我正在尝试这样的事情：

这是我的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>
      );
    }

还有我的Login.js：

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传递令牌。此外，即使我用单个字符串填充const，它也无法正常工作，所以我犯错了吗？令牌会有所不同吗？

Answer 1

screenProps

您需要使用screenProps。您应该检查documentation来了解更多信息。

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

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

然后，您可以使用this.props.screenProps.token在屏幕上访问它。

这是我创建的小吃，显示通过导航器传递值。 https://snack.expo.io/@andypandy/passing-props-through-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});将令牌值设置为state。

这就是我重构您的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-52ead919a3f0 https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296 https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6

以下文章显示了promises和async/await之间的区别 https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8

从App.js到其他文件的React-native传递道具

1 个答案:

screenProps

Firebase

其他阅读内容