Wie Kopfzeile hinzufügen, um native-Router-Flux-Tabbar reagieren?

Question

Ich mache Simpe-Anwendung mit react-native, und seine dritte Partei Modul react-native-router-flux für die einfache Handhabung Komponente Navigator.

Ich möchte Header-Komponente über tabs hinzufügen, die meinen App-Namen und ausgewählten Tab-Namen zeigt. Ich habe verschiedene Möglichkeiten ausprobiert, aber ich weiß nicht, wo ich den Header-Code einfügen soll.

Mein Top-Komponente Code wie dies

<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> 

Dies tatsächlich aussieht

Was ich tun möchte, ist einfach Header-Komponente über Registerkarten hinzufügen, wie

Wie geht das? Bitte gib mir einen Hinweis! Wo stelle ich diesen Code?

Answer 1

Wenn Sie Ihre eigene Header-Komponente verwenden möchten, sollten Sie eine eigene Datei in eine separate Datei schreiben und in die Bildschirme exportieren/importieren. Das react-native selbst rendert die Komponenten nacheinander (von oben nach unten). Also, wenn Sie es so machen, sollten Sie Ihre importierte Header-Komponente oben in der render() -Funktion platzieren.

Die andere Möglichkeit besteht darin, ein Drittanbieter-Modul wie die native-base zu verwenden (die bereits eine Header-Komponente definiert hat). Ja

https://github.com/GeekyAnts/NativeBase