React native 条件反应导航标题按钮

我试图让一个按钮出现在React导航屏幕标题栏的头灯中，但我似乎无法让它工作

我想在props.players.length>1时显示headerRight中的开始按钮

---

有人能给我指出正确的方向吗？

你可以使用这里描述的标题的相同机制：

设置导航参数并在导航选项上使用它

就你而言：

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}
    ...
}

---

您可以使用此处描述的标题相同的机制：

设置导航参数并在导航选项上使用它

就你而言：

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}
    ...
}

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

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

如果您有嵌套导航，例如父stackNavigator中的子底部选项卡导航器，请查看基于子导航器的状态请参见文档

---

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

您能给出更完整的代码摘要吗？您能给出更完整的代码摘要吗？