我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
如果你的屏幕是一个类组件
static navigationOptions = ({ navigation }) => {
return {
header: () => null
}
}
在目标屏幕中将其编码为第一个方法(函数)。
其他回答
在react-navigation的最新版本中，这可以在每个屏幕上隐藏标题:
<堆栈。领航员 headerMode ={“郎”} > <堆栈。屏幕 <堆栈。屏幕名 < /堆栈。领航员>
重要的是要将您使用的反应导航库版本与解决方案相匹配，因为它们都是不同的。对于那些因为某些原因还在使用react-navigation v1.0.0的人来说，这两种方法都有效:
在个别屏幕上禁用/隐藏头信息:
const AppScreens = StackNavigator(
{
Main: { screen: Main, navigationOptions: { header: null } },
Login: { screen: Login },
Profile: { screen: Profile, navigationOptions: { header: null } },
});
禁用/隐藏所有屏幕一次，使用这个:
const AppScreens = StackNavigator(
{
Main: { screen: Main},
Login: { screen: Login },
Profile: { screen: Profile },
},
{
headerMode: 'none',
}
);
如果你只想从react-native-navigation的一个屏幕上删除它，那么:
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options= {{headerShown: false}} />
</Stack.Navigator>
在你的目标屏幕上，你必须编写这样的代码!
static 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;
这通常允许隐藏组件头，它将在屏幕呈现时执行。
