如何添加標題到react-native-router-flux tabbar？

Question

我正在使用react-native及其第三方模塊react-native-router-flux進行simpe應用程序，以便輕鬆處理組件導航器。

我想添加標頭組件tabs以上，它顯示我的應用程序名稱和選定的標籤名稱。我嘗試了幾種方法，但我不知道在哪裏放置標題組件代碼。

我頂組件這樣的代碼

<Router> 
    <Scene key="root">  
     <Scene key="todoList" tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial> 
      <Scene key="first" title="First" icon={TabIcon}> 
       <Scene key="scarlet" component={TabComponent1} hideNavBar title="tab1" initial /> 
      </Scene> 
      <Scene key="second" title="Second" icon={TabIcon}> 
       <Scene key="scarlet2" component={TabComponent2} hideNavBar title="tab2" initial /> 
      </Scene> 
      <Scene key="third" title="Third" icon={TabIcon}> 
       <Scene key="scarlet3" component={TabComponent3} hideNavBar title="tab3" initial /> 
      </Scene> 
     </Scene> 
    </Scene> 
</Router> 

這實際上看起來像

我想要做的就是簡單地添加上述標籤頭組件，像

如何做到這一點？請給我一個提示！我在哪裏放置代碼？

Answer 1

如果你想使用你自己的Header組件，我認爲你應該爲你自己寫一個單獨的文件並導出/導入到屏幕上。反應原生本身是按順序依次渲染組件（從上到下）。所以如果你這樣做，你應該把你導入的Header組件放在render（）函數的最上面。

另一種方式是使用第三方模塊，如本地基礎（已經定義了Header組件）。

https://github.com/GeekyAnts/NativeBase