React Native NavigatorIOS 不会重新渲染组件答案

【问题标题】：React Native NavigatorIOS won't re-render ComponentReact Native NavigatorIOS 不会重新渲染组件
【发布时间】：2017-03-14 09:41:40
【问题描述】：

我有一个包含多个 TabBar.Item 组件的 TabBar。每个 TabBar.Item 组件都有自己的 NavigatorIOS。

这是我的 TabBar.js 的代码示例

<TabBarIOS>
  <TabBarIOS.Item
    selected={this.state.selectedTab === "profile"}
    systemIcon={"most-viewed"}
    onPress={() => this.setTab("profile")}
  >
    <NavigationBar title="Profile" component={Profile} passProps={{ showFilter: this.state.showFilter }} />
  </TabBarIOS.Item>
</TabBarIOS>

在我的NavigationBar.js 中，我只是渲染了一个NavigatorIOS

<NavigatorIOS
  ref="nav"
  initialRoute={{ ...this.props }}
  style={{
    flex: 1
  }}
/>

当用户单击Filter 按钮时，this.state.showFilter 将更新为TabBar。然后它被正确地传递给NavigatonBar，但是NavigationBar内部的render()函数被执行，

此时，我的组件不会重新渲染initialRoute（配置文件）中列出的组件

有什么方法可以实现吗？单击过滤器时，我需要在Profile 内设置一个可选变量来隐藏和显示过滤器Modal

【问题讨论】：

我不知道IOS，但是这个问题似乎提供了一个可能的解决方案：stackoverflow.com/questions/3249240/…
感谢您的评论，这与 React Native (JavaScript) 更相关，与 Swift/Objective-C（您提供的链接中的内容）相关。

标签： react-native

【解决方案1】：

我不确定是否有更优雅的解决方案，但我有一个可行的解决方案。

我在NavigationBar 中添加了以下代码：

shouldComponentUpdate(nextProps, nextState) {
    this.refs.nav.replace({...nextProps})
    return true;
  }

这将强制重新加载initialRoute 组件。

【讨论】：