react-native - 导航器弹出时如何更新组件？

Question

我的应用使用 Navigator 进行路由和屏幕转换。

第一个屏幕有一个项目列表。当用户点击一个项目时，它会打开一个详细信息屏幕，用户可以在其中进行编辑。

当用户完成编辑并返回时(导航器的 pop() 函数)，列表不会反射(reflect)用户所做的更改。必须再次加载屏幕以显示更新后的列表。

有没有办法强制更新导航器堆栈中的组件？

我尝试了使用 Navigator 的 'onWillFocus' Prop 的方法，我可以 console.log 路由，但不知道如何获取路由所代表的屏幕的引用并强制它更新。

这正确记录了我们即将过渡到的路线:

_onWillFocus(route) {
         console.log('will transition to ' + route.name)
},

...

<Navigator 
          ref={(ref) => this._navigator = ref}
          style={{flex:1}}
          configureScene={() => Navigator.SceneConfigs.FadeAndroid}
          renderScene={this.renderScene}
          onWillFocus={this._onWillFocus}
/>

Answer 1

假设您真的想使用 onWillFocus 事件，因为这对您的情况最有意义，这是一种方法:

修改您的 renderScene 方法，以便保留对渲染场景组件的引用(在安装组件时):

renderScene(route, nav) {
  var Component = route.component;

  return (
    <Component 
      ref={component => { route.scene = component; }} 
      navigator={nav} 
      {...route.passProps} 
    />
  );
}

然后在您的 onWillFocus 处理程序中，您可以将事件转发给您的组件:

_onWillFocus(event) {
  const { data: { route } } = event;

  if (route.scene && route.scene.componentWillFocus) {
    route.scene.componentWillFocus(event);
  }
}

最后，在您的组件 componentWillFocus 处理程序中，您可以做任何您需要的事情来刷新状态并触发新的渲染。

对于其他用例，请查看 https://facebook.github.io/react/tips/communicate-between-components.html

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.