react-native-router-fluxタブバーにヘッダを追加するには？

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

独自のヘッダーコンポーネントを使用する場合は、自分で別のファイルに書き込んでエクスポート/画面にインポートする必要があります。反応ネイティブ自体は、コンポーネントを順番に（順番に下から順に）レンダリングしています。したがって、このようにしている場合は、インポートしたヘッダコンポーネントをrender（）関数の一番上に配置する必要があります。

もう1つの方法は、ネイティブベース（ヘッダーコンポーネントが既に定義されている）のような第三者のモジュールを使用することです。

https://github.com/GeekyAnts/NativeBase