react-native - 条件反应导航标题按钮

Question

我试图让一个按钮出现在headerRightReact Navigation 屏幕的标题栏中，但我似乎无法让它工作。

我希望开始按钮（里面有什么headerRight）显示什么时候props.players.length > 1。

谁能指出我正确的方向？

标签： react-nativereact-navigation

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