javascript - 如何在子组件中修改父组件的navigationOptions？

Question

我有一个名为 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 的渲染函数中调用这个函数

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

标签： javascriptreactjsreact-nativereact-navigation

Answer 1

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

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 });
  }
}