Question

我有一个带有多个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，然后执行render()内的NavigationBar函数，

此时，我的组件不会重新呈现initialRoute（个人资料）中列出的组件

有没有办法实现这个目标？点击过滤器时我需要在Profile内设置一个可选变量来隐藏并显示过滤器Modal

Answer 1

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

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

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

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

React Native NavigatorIOS不会重新渲染Component

1 个答案: