Question

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

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

当用户完成编辑并返回（导航器的pop（）函数）时，列表不会反映用户所做的更改。必须再次加载屏幕才能显示更新的列表。

有没有办法在Navigator的堆栈中强制更新组件？

我尝试了使用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（）。 Flux模式是安排这种方式的可能方式之一。

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

1 个答案: