如何在 React Native 的导航项中使用状态变量答案

【问题标题】：How to use status variable in navigation item in React Native如何在 React Native 的导航项中使用状态变量
【发布时间】：2018-05-10 21:31:36
【问题描述】：

我想根据 React Native 应用中的状态变化来显示/隐藏导航项。这就是我所做的。

static navigationOptions = ({ navigation }) => {    
    return {
      headerLeft: <Button this.state.showSaveBtn && title='Save'/>
    }
  }
...
validateForm () {
    if (validate()){
       this.setState({showSaveBtn: true});
    } else {
       this.setState({showSaveBtn: false});
    }
}

但它无法运行，因为“this”不引用当前组件。我刚刚展示了我想怎么做。重要的是用状态变量控制导航项。

谢谢。

【问题讨论】：

标签： reactjs react-native navigation stack-navigator

【解决方案1】：

您需要设置导航状态，而不是组件状态。如果表单 validate() 返回 true，您可以执行类似 this.props.navigation.setParams({showSaveBtn: true }) 的操作，然后在 navigationOptions 中您只需执行以下操作：

static navigationOptions = ({ navigation }) => {

        const { params } = navigation.state;

        return {
          headerLeft: <Button params.showSaveBtn && title='Save'/>
        }

};

Ps.：不要忘记在componentWillMount()中定义showSaveBtn导航参数的默认值

【讨论】：

【解决方案2】：

改变想法

navigationOptions: {
    header: null
}

自定义标题

【讨论】：