Question

我在RN应用中使用了React导航，并试图实现一个表单来提交一些信息。我在右侧标题处使用了一个按钮，并希望为按钮设置不同的颜色，以表示该表单是否合法（例如，白色表示合法表单，透明表示重要输入保留为空白）。

我使用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();
      }
    }
  });
}

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

2 个答案: