Wie beide Suchleiste und Tab-Schaltflächen in reagieren-native hinzufügen verwenden reagieren-Navigation

Question

ich einen Login-Bildschirm haben, wenn der Benutzer Login sie ähnlich einem Bildschirm gebracht werden, zu dem oben gezeigt.

In diesem Bildschirm habe ich einen TabNavigator mit Registerkarten auf 5 Bildschirme, ähnlich wie im Bild oben gezeigt. Es hat auch eine Kopfzeile, etwas mit Suchleiste darin. Dieser Header sollte nur in 4 der 5 Tabs angezeigt werden und es gibt einen anderen Header, den ich in der 5. Registerkarte anzeigen muss.

Gibt es eine Möglichkeit, dies zu tun? Ich weiß, dass ich eine Ansicht in 4 der 5 Registerkarten hinzufügen kann, die gleichen Header und eine Ansicht im fünften Bildschirm, der eine andere Kopfzeile rendert, Aber ich fragte mich, ob es einen Weg gibt, ich könnte dies tun, ohne das gleiche zu rendern In allen 4 Tabs immer wieder sehen.

PS Es sollte Sie

Answer 1

auf beiden iOS und Android arbeiten können header von TabNavigator von navigationOptions konfigurieren:

const TabNav = TabNavigator({ 
    First: { screen: FirstPage }, 
    Second: { screen: SecondPage }, 
    Third: { screen: ThirdPage }, 
    Fourth: { screen: FourthPage }, 
    Fifth: { screen: FifthPage } 
}, { 
    navigationOptions: { 
    header: <SearchHeader /> 
    } 
}) 

Und dann benutzerdefinierte navigationOptions in FifthPage:

class FifthPage extends Component { 
    static navigationOptions = { 
    header: <FifthPageHeader /> 
    } 
} 

ich nur erstellt eine Demo auf Expo Snack: https://snack.expo.io/rJDGpmPHZ, der 5. Bildschirm hat eine blaue h Eader, und die anderen haben einen roten.

In dem Dokument von TabNavigator bei https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options es die header Option nicht Liste hat, denke ich, wird es StackNavigator geben werden.