直奔主題：在使用React Native Navigator的時候，很多同學跟我一樣，上來就用，但是用了發現一個問題，那就是如下圖：

看到此處 登入的文字，為毛android上就要跑偏了，當然畢竟使系統的問題，但是對於我們要求必須在中間的怎麼辦，我還想在navigator上新增其他的圖片按鈕等等，怎麼辦？看看效果，其實我們更希望是這樣的：

當然，這裡做的 是使用官方的navigator api 而不是自己在頁面中模仿的一個view，不然下面說的也沒有任何意義，直接上圖片程式碼和原始碼:

///自定義路由導航
class NavigationBar extends Navigator
 
.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];
//返回null，導航將會消失，也就達到了隱藏導航欄的目的
      if (route.display === false) {
        return null;
      }else{
        // return super.render(); //這是呼叫系統提供的UI,我們不管直接註釋掉，自己寫一個自己需要的
 

        return (
            <View style={{position:'absolute',top:0,left:0,width:width,height:Platform.OS === 'ios' ? 64 : 56,backgroundColor:'#f9f9f9',paddingTop:Platform.OS === 'ios' ? 20 : 20,justifyContent:'center',alignItems:'center'}}>
                <View>
                    <Text>{route.name}</Text>
                </View>
            </View>
        );
      }
    }
  }
}
 

好了到這裡，估計大家都明白了 我們繼承了React Native 中的Navigator.NavigationBar，然後重寫了render這個方法，這樣就自定義了官方給我們提供的NavigationBar。隨便控制吧 有route 什麼都有 實現各種導航點選 搜尋也不是問題。