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

Question

我想根据反应本机应用程序中的状态变化显示/隐藏导航项。 这就是我所做的。

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

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

谢谢。

Answer 1

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

static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
return {
headerLeft: <Button params.showSaveBtn && title='Save'/>
}
};

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

Answer 2

改变想法

navigationOptions: {
header: null
}

自定义页眉