反应导航 goBack() 并更新父状态

Question

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

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

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

我怎样才能做到这一点？

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

原文由 Darren Lau 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

然后在登录/注册视图中，在 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();

原文由 Zhang Buzz 发布，翻译遵循 CC BY-SA 4.0 许可协议