[英]Hide header in stack navigator React navigation
我正在尝试使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下,首先使用堆栈导航器,然后使用选项卡导航器。 我想从堆栈导航器中隐藏标题。 当我使用以下导航选项时,它无法正常工作:
navigationOptions: { header: { visible: false } }
我在 stacknavigator 中使用的前两个组件上尝试此代码。 如果我使用此行,则会出现一些错误,例如:
从第 5 版开始更新
从版本 5 开始,它是选项headerShown
in screenOptions
用法示例:
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
如果您只想在 1 个屏幕上隐藏标题,您可以通过在屏幕组件上设置 screenOptions 来完成此操作,请参见下面的示例:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
另请参阅有关第 5 版的博客
更新
从 2.0.0-alpha.36 (2019-11-07) 版本开始,
有一个新的导航选项: headershown
navigationOptions: {
headerShown: false,
}
https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
旧答案
我用它来隐藏堆栈栏(注意这是第二个参数的值):
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
当您使用此方法时,它将隐藏在所有屏幕上。
在您的情况下,它将如下所示:
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification },
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
在 v4 上,只需在要隐藏标题的页面中使用以下代码
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
请参阅堆栈导航器
只需将其添加到您的类/组件代码片段中,Header 将被隐藏
static navigationOptions = { header: null }
在给定的解决方案中,HomeScreen 的标题是隐藏的,选项={{headerShown:false}}
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
</NavigationContainer>
如果你的屏幕是一个类组件
static navigationOptions = ({ navigation }) => {
return {
header: () => null
}
}
在您的目标屏幕中将其编码为第一种方法(函数)。
如果你想隐藏在特定屏幕上而不是这样:
// create a component
export default class Login extends Component<{}> {
static navigationOptions = { header: null };
}
我正在使用header : null
而不是header : { visible : true }
我正在使用 react-native cli。 这是例子:
static navigationOptions = {
header : null
};
在 stackNavigator 中添加新的 navigationOptions 对象。
试试这个:
const MainNavigator = createStackNavigator({
LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});
希望它有帮助。
如果有人在 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,
});
这对我有用:
const Routes = createStackNavigator({
Intro: {
screen: Intro,
navigationOptions: {
header: null,
}
}
},
{
initialRouteName: 'Intro',
}
);
您可以像这样隐藏标题:
<Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
采用
static navigationOptions = { header: null }
在类/组件中
class Login extends Component {
static navigationOptions = {
header: null
}
}
如果你使用 react-navigation Version: 6.x 你可以这样使用。 在这里,SignInScreen 标题将被以下代码段隐藏
options={{
headerShown: false,
}}
完整的脚本应该是
import {createStackNavigator} from '@react-navigation/stack';
import SignInScreen from '../screens/SignInscreen';
import SignUpScreen from '../screens/SignUpScreen';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Sing In"
component={SignInScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="Sing Up" component={SignUpScreen} />
</Stack.Navigator>
);
}
export default function LoginFlowNavigator() {
return <MyStack />;
}
React Native Navigation v6.x 2022 年 5 月
在 Screen 的options属性中的headerShown
属性中设置false
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
附言
const Stack = createNativeStackNavigator()
。
在您的目标屏幕中,您必须对此进行编码!
static navigationOptions = ({ navigation }) => {
return {
header: null
}
}
所有的答案都展示了如何使用类组件来做到这一点,但对于功能组件,您可以这样做:
const MyComponent = () => {
return (
<SafeAreaView>
<Text>MyComponent</Text>
</SafeAreaView>
)
}
MyComponent.navigationOptions = ({ /*navigation*/ }) => {
return {
header: null
}
}
如果您删除标题,您的组件可能位于您看不到它的地方(当手机没有方形屏幕时),因此在删除标题时使用它很重要。
<Stack.Screen
name="SignInScreen"
component={Screens.SignInScreen}
options={{ headerShown: false }}
/>
options={{ headerShown: false }}
对我options={{ headerShown: false }}
。
** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",
在react navigation 5.x 中,您可以通过将Navigator
的headerMode
设置为false
来隐藏所有屏幕的标题。
<Stack.Navigator headerMode={false}>
{/* Your screens */}
</Stack.Navigator>
这适用于堆栈导航
<Stack.Screen
name="Home"
component={HomeComponent}
options={{
headerShown: false,
}}
/>
如果您只想将其从react-native-navigation
一个屏幕中删除,则:
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options= {{headerShown: false}} />
</Stack.Navigator>
对我来说, navigationOptions
不起作用。 以下对我有用。
<Stack.Screen name="Login" component={Login}
options={{
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
您可以像这样隐藏 StackNavigator 标头:
const Stack = createStackNavigator();
function StackScreen() {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Training" component={Training} />
<Stack.Screen name="Course" component={Course} />
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator>
);
}
这将从组件类中删除标题。
export default class SampleClass extends Component {
navigationOptions = {
headerMode: 'none'
}
...
}
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,
};
在最新版本的 react-navigation 中,这可以隐藏每个屏幕上的标题:headerMode={'none'}
<Stack.Navigator headerMode={'none'} > <Stack.Screen name="Home" component={HomeScreen}/> <Stack.Screen name="Details" component={DetailsScreen}/> </Stack.Navigator>
使用最新的react-navigation-stack v4,您可以隐藏标题
import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown:false
}
}
})
您只能在新的更新版本中使用 headerShown:false ( react-naviagion 版本 6 )
import { createStackNavigator } from '@react-navigation/stack';
const Util = createStackNavigator();
const UtilStack = () =>{
return(
<Util.Navigator>
<Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
)
<Util.Navigator>
}
我遇到了同样的问题,但是我已经使用navigationOptions
在各个类中完成了标头工作,并且正在使用createBottomTabNavigator
其标头可见,而类的标头不可见。 我已经尝试了诸如headerMode: none
, header: null
等之类的所有操作,但是无法隐藏bottomTabNavigator
的标题。
将您使用的 react-navigation 库版本与解决方案相匹配很重要,因为它们都是不同的。 对于那些像我一样出于某种原因仍在使用 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',
}
);
对于单屏,您可以像这样在 createStackNavigator 中设置header:null或headerShown: false
const App = createStackNavigator({ First: { screen: Home, navigationOptions: { header: null, }, }, });
使用 defaultNavigationOptions 一次性隐藏所有屏幕的标题
const App = createStackNavigator({ First: { screen: HomeActivity, }, }, { defaultNavigationOptions: { header: null }, });
如果要从所有屏幕中删除标题,请转到 app.js 并将此代码添加到 Stack.Navigator
screenOptions={ { headerShown: false } }
在V4 上你必须使用这个:
headerLeft: () => { }
这是不推荐使用的:
header: null
尝试最好的方法,下面的代码对我有用。
options={{
headerShown: false,
}}
将上面的代码放在 <Stack.Screen 标签中。
<Stack.Navigator>
<Stack.Screen name="LogOut" component={LogOut} options={{
headerShown: false,
}} />
</Stack.Navigator>
</NavigationContainer>
从特定屏幕隐藏 header 的另一种方法是尝试使用 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 并且它将在屏幕渲染时执行。
对于 4.x,不推荐使用header: null
,应使用headerShown: false
代替
例如:
const AppScreens = createStackNavigator({
cover: {
screen: Login,
path: '/login',
navigationOptions: () => ({
headerShown: false,
}),
},
})
/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/
const {Navigator, Screen } =createNativeStackNavigator();
export function AuthRoutes(){
return (
<Navigator
screenOptions={
{
contentStyle:{
backgroundColor: 'transparent'
},
headerShown: false
}
}
>
</Navigator>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.