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

Question

我的应用程序使用Navigator进行路由和屏幕转换.

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

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

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

我尝试了使用Navigator的'onWillFocus'道具的方法,我可以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

对于没有父子关系的两个组件之间的通信,您可以设置自己的全局事件系统.订阅componentDidMount()中的事件,取消订阅componentWillUnmount(),并在收到事件时调用setState().通量模式是安排这种方式的可能方式之一.