react-native - react 导航 goBack() 并更新父状态

Question

我有一个页面，如果他/她登录或“创建一个帐户”或“登录”选项，如果他/她没有登录，它将呈现用户的姓名。画面如下



他们可以导航到“登录”或“创建帐户”页面。成功登录或注册后，它将导航到此页面并显示用户名。画面如下



目前，我将用户数据存储在 AsyncStorage ，我想在用户从页面重定向时成功登录或注册后更新此字段。

我怎样才能做到这一点？

有没有办法从 navigate.goBack() 传递参数和 parent 可以收听参数并更新其状态？

Answer 1

当您像这样调用导航时，您可以将回调函数作为参数传递:

  const DEMO_TOKEN = await AsyncStorage.getItem('id_token');
  if (DEMO_TOKEN === null) {
    this.props.navigation.navigate('Login', {
      onGoBack: () => this.refresh(),
    });
    return -3;
  } else {
    this.doSomething();
  }

并定义您的回调函数:

refresh() {
  this.doSomething();
}

然后在登录/注册 View 中，在 goBack 之前，您可以执行以下操作:

await AsyncStorage.setItem('id_token', myId);
this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack();

React Navigation v5 更新:

await AsyncStorage.setItem('id_token', myId);
this.props.route.params.onGoBack();
this.props.navigation.goBack();