如何使用 React 导航根据 React Native 中的状态属性更改导航标题按钮样式?

Question

我正在我的RN应用程序中使用反应导航，并尝试实现一个表单来提交一些信息。我在右侧标题中使用了一个按钮，并希望用不同的颜色设置按钮样式以指示表单是否合法(例如，白色表示合法形式，透明表示将重要输入留空(。

我使用this.state.submitDisabled来指示其合法性并在componentDidMount()中定义正确的标头，并将导航参数传递给标头以navigationOptions呈现：

this.props.navigation.setParams({
headerRight: (
<MaterialHeaderButtons>
<Item title="submit" iconName="check"
color={this.state.submitDisabled ? colors.white_disabled : colors.white}
onPress={() => {
if (!this.state.submitDisabled) {
this.postEvent();
}
}}/>
</MaterialHeaderButtons>
),
});

但是，基于this.state.submitDisabled值的颜色更改语句不起作用。我已经检查了它的值，当this.state.submitDisabled更改时，按钮的颜色不会改变。似乎在如上所述设置为导航参数时确定了颜色，此后不会更改。

我怎样才能达到我所描述的效果？

Answer 1

当您更改状态的值时，也会更改导航参数。

export class Example extends Component {
static navigationOptions = ({ navigation }) => {
const showModal = get(navigation, 'state.params.showModal');
return {
headerTitle: <Header
showModal={showModal}
backIcon />,
headerStyle: HeaderStyle,
headerLeft: null,
};
};
constructor(props) {
super(props);
this.state = {
showModal: false,
};
}
componentDidMount = () => {
this.props.navigation.setParams({
showModal: this.state.showModal,
});
}
handleModal=(value)=>{
this.setState({showModal:value});
this.props.navigation.setParams({
showModal: this.state.showModal,
});
}
render() {
return null;
}
}

Answer 2

在您的实现中，this.state.submitDisabled未绑定到屏幕。请尝试以下操作：

static navigationOptions = ({ navigation }) => {
headerRight: (
<MaterialHeaderButtons>
<Item 
title="submit" 
iconName="check"
color={navigation.getParam('submitDisabled') ? colors.white_disabled : colors.white}
onPress={navigation.getParam('handlePress')}
/>
</MaterialHeaderButtons>
),
})
componentWillMount() {
this.props.navigation.setParams({
submitDisabled: this.state.submitDisabled,
handlePress: () => {
if (!this.state.submitDisabled) {
this.postEvent();
}
}
});
}