Próbuję przełączyć ekran za pomocą nawigatora stosu i kart.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
W tym przypadku najpierw używany jest stacknavigator, a następnie tabnavigator. i chcę ukryć nagłówki nawigatora stosu. WIt nie działa poprawnie, gdy używam opcji nawigacji, takich jak:
navigationOptions: { header: { visible: false } }
Próbuję tego kodu na pierwszych dwóch składnikach, które są używane w programie stacknavigator. jeśli używam tej linii, pojawia się błąd, taki jak:
źródło
options
takiego rekwizytu<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Po prostu użyj poniższego kodu na stronie, na której chcesz ukryć nagłówek
zobacz Stack Navigator
źródło
Po prostu dodaj to do fragmentu kodu klasy / komponentu, a nagłówek zostanie ukryty
źródło
Jeśli twój ekran jest komponentem klasy
zakoduj to na docelowym ekranie jako pierwszą metodę (funkcję).
źródło
header: () => null
to właściwy sposób, w przeciwnym razie podczas ładowania strony pojawi się błąd w nagłówkuJeśli chcesz ukryć się na określonym ekranie, zrób tak:
źródło
W podanym rozwiązaniu nagłówek jest ukryty dla HomeScreen przez- options = {{headerShown: false}}
źródło
Używam
header : null
zamiastheader : { visible : true }
używać React-Native CLI. to jest przykład:źródło
Dodaj nowy obiekt navigationOptions w stackNavigator.
Spróbuj tego :
Mam nadzieję, że to pomoże.
źródło
Jeśli ktoś szuka sposobu przełączania nagłówka to w componentDidMount napisz coś takiego:
Kiedy
I gdzieś, gdy zdarzenie kończy pracę:
źródło
To zadziałało dla mnie:
źródło
źródło
Możesz ukryć nagłówek w ten sposób:
źródło
To działa dla nawigacji stosu
źródło
Jeśli chcesz usunąć go tylko z jednego ekranu w
react-native-navigation
:źródło
źródło
Wszystkie odpowiedzi pokazują, jak to zrobić z komponentami klasy, ale w przypadku komponentów funkcjonalnych robisz:
Jeśli usuniesz nagłówek, twój komponent może znajdować się w miejscach, w których go nie widać (gdy telefon nie ma kwadratowego ekranu), więc ważne jest, aby użyć go podczas usuwania nagłówka.
źródło
źródło
options={{ headerShown: false }}
pracuje dla mnie.**
"@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",
źródło
W React navigation 5.x możesz ukryć nagłówki wszystkich ekranów, ustawiając
headerMode
właściwośćNavigator
tofalse
.źródło
Możesz ukryć nagłówek StackNavigator w następujący sposób:
źródło
Ważne jest, aby dopasować używaną wersję biblioteki reaktywnej nawigacji do rozwiązania, ponieważ wszystkie są różne. Dla tych, którzy z jakiegoś powodu, takiego jak ja, nadal używają React-navigation v1.0.0, oba te rozwiązania działały:
Aby wyłączyć / ukryć nagłówek na poszczególnych ekranach:
Aby wyłączyć / ukryć wszystkie ekrany naraz, użyj tego:
źródło
W najnowszej wersji reaktywnej nawigacji działa to, aby ukryć nagłówek na każdym ekranie: headerMode = {'none'}
źródło
w przypadku wersji 4.x
header: null
jest przestarzała, należy użyćheaderShown: false
zamiast niejdawny:
źródło
Dla pojedynczego ekranu możesz ustawić header: null lub headerShown: false w createStackNavigator w ten sposób
Ukryj nagłówek na wszystkich ekranach za pomocą defaultNavigationOptions
źródło
jeśli chcesz usunąć nagłówek ze wszystkich ekranów, goto app.js i dodaj ten kod do Stack.Navigator
źródło