我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
另一种隐藏特定屏幕标题的方法是尝试使用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;
这通常允许隐藏组件头，它将在屏幕呈现时执行。
其他回答
我使用header: null而不是header: {visible: true}我使用react-native cli。例子如下:
static navigationOptions = {
header : null
};
const CallStack = createStackNavigator({
Calls: Calls,
CallsScreen:CallsScreen,
}, {headerMode: 'none'});
CallStack.navigationOptions = {
tabBarLabel: 'Calls',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
header: null,
headerVisible: false,
};
<Stack.Screen
name="SignInScreen"
component={Screens.SignInScreen}
options={{ headerShown: false }}
/>
options={{headershows: false}}为我工作。
** “@react-navigation/native”： “^5.0.7”， “@react-navigation/stack”： “^5.0.8”，
如果有人搜索如何切换头文件，那么在componentDidMount中写一些像这样的东西:
this.props.navigation.setParams({
hideHeader: true,
});
当
static navigationOptions = ({ navigation }) => {
const {params = {}} = navigation.state;
if (params.hideHeader) {
return {
header: null,
}
}
return {
headerLeft: <Text>Hi</Text>,
headerRight: <Text>Hi</Text>,
headerTitle: <Text>Hi</Text>
};
};
当事件完成时:
this.props.navigation.setParams({
hideHeader: false,
});
在你的目标屏幕上，你必须编写这样的代码!
static navigationOptions = ({ navigation }) => {
return {
header: null
}
}
