前言

正在使用react native構建自己的第二款APP，遇到了之前沒有遇到的一些問題，就是點選下面的tabbar的時候，上面的狀態列問題無法動態改變。查閱了一些資料也沒有頭緒，最後去官網看了一下文件，解決後為有同樣問題的大家分享一下步驟。

步驟

1. 重構navigationOptions使得可以接收引數

static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;

        return {
            title: params ? params.title : '新聞',            #最關鍵的一句，剩下的屬性自己可以自定義新增
                headerStyle: {
                    backgroundColor: '#fff',
                },
                headerTintColor: '#000',
                headerTitleStyle: {
                    flex: 1,
                    textAlign: 'center',
                    fontWeight: '20',
                },
        }
    };
 

2. 自定義方法，改變title的值

_gotoPage(title) {
        this.props.navigation.setParams({title: title});
    }

使用onPress呼叫方法

onPress={this._gotoPage.bind(this, '訊息')}

或者方便起見，也可以不定義方法，直接在onPress中呼叫：

onPress={() => this.props.navigation.setParams({title: '訊息'})}

此時，點選下面labbar上面的title已經可以自動改變了。

我的部落格即將搬運同步至騰訊雲+社群，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3pgogufbqg2so