我似乎无法在新版本的React Navigation中将header配置为null。我可以使用headerTransparent选项将其设置为透明,但这似乎标题仍然存在,因为屏幕仍然需要一个名称。
Here is what I had initially, using the template that comes with a new Expo application
And this is what it looks like with the header as transparent。从本质上来说,这是我想看到的,但标题仍然被强制放在其中。
我不需要导航标题,但这看起来像默认行为。我尝试浏览文档以查看是否有删除标题的道具,但遇到了404页的选项:https://reactnavigation.org/docs/en/navigation-options.html
我是React Native的新手,所以可能有些误解。但是有关此文档尚不清楚,我找不到直接解决此问题的stackoverflow问题。
这是我的App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';
const Stack = createStackNavigator();
........
<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
<Stack.Navigator>
<Stack.Screen name="root" component={BottomTabNavigator} options={{headerTransparent: true}}/>
</Stack.Navigator>
</NavigationContainer>
这是我的BottomTabNavigator.js,它与expo提供的模板代码非常相似。
import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/Home';
import SearchScreen from '../screens/Search';
const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'Home';
export default function BottomTabNavigator({ navigation, route }) {
navigation.setOptions({ headerTitle: getHeaderTitle(route) });
return (
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<BottomTab.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Home',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" />
}}
/>
<BottomTab.Screen
name="Search"
component={SearchScreen}
options={{
title: 'Search',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
}}
/>
</BottomTab.Navigator>
);
}
function getHeaderTitle(route) {
const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
switch (routeName) {
case 'Home':
return 'How to get started';
case 'Appointments':
return 'Your appointments';
case 'Search':
return 'Search for services';
case 'Account':
return 'Account'
}
}
在您的情况下,您有两个选择。您可以禁用所有屏幕的标题,也可以仅禁用所选屏幕的标题。
对于所有禁用应用程序的标头,请像这样编辑app.js
App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';
const Stack = createStackNavigator();
........
<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
<Stack.Navigator screenOptions={{headerShown: false,}}>
<Stack.Screen name="root" component={BottomTabNavigator}/>
</Stack.Navigator>
</NavigationContainer>
您需要将screenOptions传递到Stack.Navigator并创建headerShown:false
假设您只想在特定屏幕上禁用标题,那么本示例将为您提供帮助
<Stack.Navigator ...>
...
<Stack.Screen
name="Landing"
component={LandingScreen}
options={{
headerShown: false, // change this to `false`
}}
/>
...
</Stack.Navigator>
希望您对此有个清楚的主意:)