如何在子组件中修改父组件的navigationOptions？答案

【问题标题】：How to modify navigationOptions of parent component in child component?如何在子组件中修改父组件的navigationOptions？
【发布时间】：2018-12-28 16:02:47
【问题描述】：

我有一个名为 main.js 的组件，所有其他组件都在其中呈现。此外，所有其他组件都有其特定的 navigaitonOptions。但是，当我在 main.js 中呈现这些组件时，我无法获取它们的 navigationOptions 并使用它们的 navigationOptions 呈现导航标题。所以问题是我如何将子组件的 navigationOptions 变量带到父组件并用子组件的 navigationOptions 覆盖父组件？

我尝试将导航道具传递给子组件并使用 setParams 函数设置参数，但没有成功。

showTab() {
switch (this.state.activeTab) {
  case 'NewsRouter':
      return <News navigation={this.props.navigation} />;
      break;
  case 'MenuRouter':
      return <Menu navigation={this.navigationOptions} />;
      break;
  case 'CalendarRouter':
      return <Calendar navigation={this.navigationOptions} />;
      break;
  case 'MoodleRouter':
      return <Moodle navigation={this.navigationOptions} />;
      break;
  case 'CouncilRouter':
      return <Council navigation={this.navigationOptions} />;
      break;
}

}

我选择了要用这个函数渲染的组件，我在 main.js 的渲染函数中调用这个函数

在屏幕上呈现的屏幕相关组件中的标签栏上的每次按下，我希望能够获取相关组件的导航选项。如果有任何帮助，我将不胜感激。

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

给父组件一个状态navigationOptions和一个方法setNavigationOptions。然后子组件将拥有一个属性setNavigationOptions，子组件可以从componentDidMount 中调用this.props.setNavigationOptions(navigationOptions)。

class Child extends React.PureComponent {
  componentDidMount() {
    this.props.setNavigationOptions(navigationOptions);
  }
  ...
}

class Parent extends React.PureComponent {
  constructor() {
    super();
    this.state = { navigationOptions: [] };
  }
  render() {
    return (
      <React.Fragment>
        <Navigation options={this.state.navigationOptions}/>
        <Child setNavigationOptions={this.setNavigationOptions}/>
      </React.Fragment>
    );
  }
  setNavigationOptions = (navigationOptions) => {
    this.setState({ navigationOptions });
  }
}

【讨论】：

【解决方案2】：

尝试使其全球化navigationOptions

【讨论】：