很少寫blog，尤其是技術類的，今天看了下RN已經升級到55了，記得之前用的還是在43版本，新功能就不多說了，自己去看React Nativ官網。剛剛用了下react-navigation，發現很玩，但是也遇到了一些坑，以下是填坑。

1,標題文字設定

react-navigation給出的屬性中有一個title屬性，在navigationOptions中，直接定義即可，即下面的程式碼

static navigationOptions = { title: '自定義Header'};除了上面的方式外，還可以使用下面的程式碼定義標題欄文字，如下navigationOptions: { headerTitle: ( <Text>自定義Header</Text> )}

執行專案後發現，標題欄中的文字並不是居中的，這並不符合我的預期，後檢視api，發現可以通過設定headerTitle中的Text樣式來實現，程式碼如下

navigationOptions: { headerTitle: ( <Text style={{ flex: 1, textAlign: 'center' }}>自定義Header</Text> ),}

執行後，你會發現這個標題並不是完美的居中，而是有一點偏右，這怎麼辦呢？經反覆除錯發現，只要在navigationOptions中設定一個空的view即可，恍然大悟啊，程式碼如下

navigationOptions: { headerTitle: ( <Text style={{ flex: 1, textAlign: 'center' }}>自定義Header</Text> ), headerRight: <View/>}

2,標題欄文字的隱藏

通過檢視api你會發現有一個屬性

tabBarVisible

通過設定這個屬性的true or false 即可實現標題的隱藏與顯示，但是實際使用中，有如下方式

navigationOptions: { tabBarVisible: false, headerTitle: ( <Text style={{ flex: 1, textAlign: 'center' }}>自定義Header</Text> ), headerRight: <View/>}

執行後，發現這個並沒有什麼卵用，標題依舊顯示

還可以這麼設定，程式碼如下

static navigationOptions = ({ navigation }) => ({ tabBarVisible: false,});

執行後，問題依舊，使用了上面兩種方式後發現，想要隱藏標題欄文字，需要在標題欄渲染完成後，修改標題欄的屬性，才可以實現，程式碼如下

componentDidMount(){ this.props.navigation.setParams({ tabBarVisible: false })}

折騰了好一會才實現，繼續發現坑填坑