条件反应导航标题按钮 [英] Conditional React Navigation header button

问题描述

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

I am trying to make a button appear in headerRight of the header bar in a React Navigation screen, but I cant seem to get it to work.

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

I want the start button (what is in headerRight) to show when props.players.length > 1.

谁能指出我正确的方向?

Can anyone point me in the right direction?

推荐答案

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

You can use the same mechanics describe here for title: https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

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

Set a navigation params and use it on your navigationOptions.

在你的情况下:

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

这篇关于条件反应导航标题按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！