在 React Native 中，如何在状态更改时更改导航选项？答案

【问题标题】：In React Native how do you change navigation options on state change?在 React Native 中，如何在状态更改时更改导航选项？
【发布时间】：2019-11-18 17:02:23
【问题描述】：

我有一个设计，其中导航标题样式颜色应根据状态而变化。

第一次安装组件时可以更改样式。但是，我看不到在后续状态更改时更改它的方法。

const mapStateToProps = state => {
    return {
        stuff: state.stuff,
    }
}

const mapDispatchToProps = dispatch => ({
    // stuff
})

class Test extends React.Component {

    static navigationOptions = ({ navigation }) => {

       // need to set barcolor to this.props.state.stuff.headerColor
        return { 
            ...
            headerStyle: {
                backgroundColor: ???,
            }  
            ...       
        }
    }


    componentDidMount() {
        // could do it here, but only works on mount
        // this.props.navigation.setParams({ headerColor: this.props.state.stuff.headerColor });
        // then access params from navigation state in navigationOptions
    }


    render() {
        //
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Test);

这在 React Native 中可行吗？

【问题讨论】：

标签： reactjs navigation native

【解决方案1】：

在 'componentDidUpdate()' 生命周期方法中执行此操作。在给定条件下，您可以设置导航参数并设置布尔值以阻止组件进入无限循环。


class Test ...

constructor(props){
    super(props)
    this.state = {
    inputSet: false
}

componentDidUpdate(){
    if(condition && !inputSet){
    this.props.navigation.setParams({ headerColor: this.props.state.stuff.headerColor });
    this.setState({inputSet: true});
}

【讨论】：