Question

我正在使用反应导航的tabnavigator。我有一个看起来像这样的父组件

changeService(serviceName){
 this.setState({

 });
}

render() {
const { container } = styles
return (
<View style={container}>
  <Header
  clientName = {this.state.project}
  serviceName = {this.state.service}
  cancelClick = {this.handleExitClick}
  />
  <ServicesNavigator
  changeService = {this.changeService}
  />
</View>
);
}

然后我的服务导航器导出如下所示

export default (props) => {
 const { screenProps, ...otherProps } = props;
 const ServicesNavigator = makeServiceNavigator(props);
 return <ServicesNavigator screenProps={{ ...screenProps, ...otherProps 
 }} />
};

导航器本身看起来像普通导航器，除了hsa navigationOptions等于

tabBarOnPress: (scene, jumpToIndex) => {
    changeService(scene.scene.route.routeName)
    scene.jumpToIndex(scene.scene.index)
  },

每当我尝试更改标签时，导航器都会完全重新加载并返回默认标签选择。如果不重置选项卡导航器，是否无法让tabnavigors父项状态变量更改？

Answer 1

每当触发tabBarOnPress时，它就会请求更新父组件的状态。然后由于React组件生命周期，状态更新将导致父组件及其所有子组件重新呈现。这就是您的标签导航器始终重置的原因。

您的案例有几种解决方案：

1 - 使用shouldComponentUpdate指导何时更新父组件。由于您希望在调用ServicesNavigator时保留changeService，因此您希望避免重新呈现相关的状态项。

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.itemA !== nextState.itemA) {
        return false; // avoid re-rendering
    }
    return true;
}

这很脏但很有效;但是从长远来看它会困扰你，因为它会导致父组件的行为不是幂等的。

修改：我忘了你有Header读取状态。如果您在父组件中使用shouldComponentUpdate，则Header将不会收到新的道具。所以第一个选项不正确。对此抱歉。

2 - 不要让父组件再次拥有该状态。在示例代码中，父组件仅具有状态，因为其子组件需要彼此通信和共享数据。那你为什么不把共享数据保存在其他地方呢？最好的工具可以是状态管理库，如mobx或redux，可以很容易地与react-navigation

集成

React-navigation tabnavigator重新加载父状态更改

1 个答案: