我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
如果你想从整个屏幕中删除头部，去app.js并将这段代码添加到Stack中。导航器
screenOptions={ { headerShown: false } }
其他回答
const MyNavigator = createStackNavigator({
FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});
//header:null will be removed from upcoming versions
所有的答案都展示了如何用类组件来实现，但是对于功能组件你需要做:
const MyComponent = () => {
return (
<SafeAreaView>
<Text>MyComponent</Text>
</SafeAreaView>
)
}
MyComponent.navigationOptions = ({ /*navigation*/ }) => {
return {
header: null
}
}
如果你删除了头部，你的组件可能在你看不到的地方(当手机没有方形屏幕时)，所以在删除头部时使用它是很重要的。
另一种隐藏特定屏幕标题的方法是尝试使用React中的useLayoutEffect。 是这样的:
import { View, Text, Button } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../hooks/userAuth";
const HomeScreen = () => {
const navigation = useNavigation();
const { logout } = useAuth();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<View>
<Text>I am the HomeScreen</Text>
<Button
title="Go to Chat Screen"
onPress={() => navigation.navigate("Chat")}
/>
<Button title="Logout" onPress={logout} />
</View>
);
};
export default HomeScreen;
这通常允许隐藏组件头，它将在屏幕呈现时执行。
React原生导航v6.x 2022年5月
在屏幕选项道具中的headershows属性中设置false
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
附: const Stack = createNativeStackNavigator()。
对我来说，navigationOptions不起作用。下面的方法对我很有效。
<Stack.Screen name="Login" component={Login}
options={{
headerShown: false
}}
/>
