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

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

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

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

lszhangkun 回答:在React Native中,如何更改状态更改上的导航选项?

以“ 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});
}
本文链接:https://www.f2er.com/3079133.html

大家都在问