Native (Android) reagieren - Stacknavigator über andere Ansicht - react-native, react-native-android, react-navigation

Ich beginne in React Native Entwicklung.

Ich habe viele Stunden auf etwas verbracht, aber ich bin immer noch blockiert.

Ich habe eine "Kopfzeile" Ansicht und unter der Ansicht, ein Stack-Navigator und in einem Tab-Navigator.

Wenn ich den Stack-Navigator öffne (mit dem LoginButton), ich möchte die neue Ansicht über die "Kopfzeile" stellen, ohne ihn zu verstecken, um hässliche Effekte zu vermeiden, wenn die neue Ansicht erscheint. Hier ein Beispiel, wenn ich einen negativen Rand oben auf den Stacknavigator setze, aber er bleibt hinter dem Header

Gibt es eine andere Möglichkeit, dies richtig zu machen? Vielen Dank.

Für Informationen habe ich von der React Native Boilerplate "Pepperoni App Kit" gestartet, meinen benutzerdefinierten Header vor dem AppNavigator hinzugefügt und die Header im Tab-Navigator ausgeblendet.

Antworten:

Anstatt Header unter Ansicht zu haben, sollten Sie die Option headerMode: "screen" mit StackNavigator verwenden. Sie können die Sichtbarkeit der Kopfzeile unter jedem Unternavigator mithilfe der Navigationsoptionen steuern.

Hier ist ein Beispielschnipsel

export const Root = StackNavigator({
Tabs: {
screen: HOViewPager,
navigationOptions: {
title: "Title",
header:<Header />
}
},
login:{
screen:Login,
navigationOptions:{
headerMode: "none",
header:null
}
},
imageoverlay:{
screen:HOImageOverlay,
navigationOptions:{
headerMode: "none",
header:null
},
},
},
{
mode: "modal",
headerMode:"screen"
});