Question

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

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

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中有可能吗？

Answer 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});
}

在React Native中，如何更改状态更改上的导航选项？

1 个答案: