条件反应导航标题按钮答案

【问题标题】：Conditional React Navigation header button条件反应导航标题按钮
【发布时间】：2018-08-18 15:56:28
【问题描述】：

我正在尝试在 React 导航屏幕的标题栏的 headerRight 中显示一个按钮，但我似乎无法让它工作。

我希望开始按钮（headerRight 中的内容）在 props.players.length > 1 时显示。

谁能指出我正确的方向？

【问题讨论】：

您能否提供更完整的代码摘录？

标签： react-native react-navigation

【解决方案1】：

您可以使用此处描述的相同机制作为标题：https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

设置导航参数并将其用于您的导航选项。

在你的情况下：

state = { players: 0 };

static navigationOptions = ({ navigation }) => {
  return {
    headerRight: navigation.getParam('players', 0) > 1 ? <YourHeaderButtonComponent /> : null ,
  };
};

addPlayer = () => {
    this.setState(({players}) => {
        this.props.navigation.setParams({players: players + 1})
        return {players: players + 1 }
    });
}

render {
    ...
    <Button onPress={this.addPlayer}
    ...
}

【讨论】：

【解决方案2】：

如果您有一个嵌套导航，例如父 stackNavigator 中的子 bottomTabNavigator，请查看基于子导航器状态应用父屏幕选项，请参阅文档here

对我来说，使用 navigation.setOptions 的第二个选项与子底部选项卡导航器一起使用，因此我可以根据 bottomTabNavigator 页面更改 stackNavigator 标题选项。

【讨论】：