Ich versuche, den Bildschirm sowohl mit dem Stack- als auch mit dem Tab-Navigator zu wechseln.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
In diesem Fall wird zuerst stacknavigator und dann tabnavigator verwendet. und ich möchte Header von Stack Navigator verstecken. Es funktioniert nicht richtig, wenn ich Navigationsoptionen wie :: verwende
navigationOptions: { header: { visible: false } }
Ich versuche diesen Code für die ersten beiden Komponenten, die in Stacknavigator verwendet werden. Wenn ich diese Zeile benutze, bekomme ich einen Fehler wie ::
quelle
options
Requisite verwenden<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Verwenden Sie einfach den folgenden Code auf der Seite, auf der Sie die Kopfzeile ausblenden möchten
Siehe Stack Navigator
quelle
Fügen Sie dies einfach Ihrem Klassen- / Komponentencode-Snippet hinzu, und der Header wird ausgeblendet
quelle
Wenn Ihr Bildschirm eine Klassenkomponente ist
Codieren Sie dies in Ihrem Zielbildschirm als erste Methode (Funktion).
quelle
header: () => null
Richtig , ist der richtige Weg, sonst bekommen Sie einen Header-Fehler beim Laden der SeiteWenn Sie sich auf einem bestimmten Bildschirm verstecken möchten, gehen Sie wie folgt vor:
quelle
Ich benutze
header : null
anstelle vonheader : { visible : true }
React-Native Cli. Dies ist das Beispiel:quelle
In der angegebenen Lösung ist der Header für den HomeScreen ausgeblendet. By-options = {{headerShown: false}}
quelle
Fügen Sie im stackNavigator ein neues Navigationsobjekt hinzu.
Versuche dies :
Ich hoffe es hilft.
quelle
Wenn jemand sucht, wie man den Header in componentDidMount umschaltet, schreibt er etwas wie:
Wann
Und irgendwo, wenn die Veranstaltung beendet ist:
quelle
Das hat bei mir funktioniert:
quelle
quelle
Sie können den Header folgendermaßen ausblenden:
quelle
Dies funktioniert für die Stapelnavigation
quelle
Wenn Sie es nur von einem Bildschirm entfernen möchten,
react-native-navigation
dann:quelle
quelle
Alle Antworten zeigen, wie es mit Klassenkomponenten geht, aber für funktionale Komponenten tun Sie Folgendes:
Wenn Sie die Kopfzeile entfernen, befindet sich Ihre Komponente möglicherweise an Stellen, an denen Sie sie nicht sehen können (wenn das Telefon keinen quadratischen Bildschirm hat). Daher ist es wichtig, sie beim Entfernen der Kopfzeile zu verwenden.
quelle
quelle
options={{ headerShown: false }}
funktioniert bei mir.** **.
"@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",
quelle
In der Reaktionsnavigation 5.x können Sie die Kopfzeile für alle Bildschirme ausblenden, indem Sie die
headerMode
Stütze desNavigator
to einstellenfalse
.quelle
Sie können den StackNavigator-Header folgendermaßen ausblenden:
quelle
Es ist wichtig, die Version der React-Navigation-Bibliothek, die Sie verwenden, an die Lösung anzupassen, da sie alle unterschiedlich sind. Für diejenigen, die aus irgendeinem Grund wie ich noch React-Navigation v1.0.0 verwenden, funktionierten beide:
Zum Deaktivieren / Ausblenden des Headers auf einzelnen Bildschirmen:
Verwenden Sie Folgendes, um alle Bildschirme gleichzeitig zu deaktivieren / auszublenden:
quelle
In der neuesten Version von React-Navigation wird der Header auf jedem Bildschirm ausgeblendet: headerMode = {'none'}
quelle
für 4.x ist das
header: null
veraltet, sollteheaderShown: false
stattdessen verwendet werdenEx:
quelle
Für den einzelnen Bildschirm können Sie in createStackNavigator wie folgt den Header: null oder den HeaderShown: false festlegen
Blenden Sie den Header mit defaultNavigationOptions auf einmal aus allen Bildschirmen aus
quelle
Wenn Sie den Header von allen Bildschirmen entfernen möchten, gehen Sie zu app.js und fügen Sie diesen Code zu Stack.Navigator hinzu
quelle