我注意到stackNavigation中的视图显示标题标题，但是如果我在TabNavigation中设置了相同的屏幕，则不会显示标题。它仅显示一个标题，如果我在每个选项卡周围包裹堆叠式插图，或者将嵌套在堆栈行动中的TabNavigation包裹。
为什么在TabNavigation中的屏幕不显示标头 - 这是预期的行为？如果是这样，最好在每个选项卡中进行堆栈划分，或者围绕TABNAvigation进行一个大堆栈插图？
//TABS导航未在每个屏幕中显示标题
const TabsNavigator = TabNavigator({
Home: {
screen:HomeScreen,
},
Profile: {
screen: ProfileScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
navigationOptions: {
header: {
visible: true,
},
},
});
标题显示我将其包装在stacknavigator
中default StackNavigator({
Home: { screen: TabsNavigator },
});
或这样做最好的方法
export TabsNavigator = TabNavigator({
Home: {
screen:StackNavigator({
Home: { screen: HomeScreen },
}),
},
Profile: {
screen: StackNavigator({Profile: {screen: ProfileScreen}}),
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
navigationOptions: {
header: {
visible: true,
},
},
});
即使这是一个相当古老的问题，我几天前就有这个问题，所以我会增加我的两美分，希望这会是将来对其他人也很有用。
React Navigation是一种令人惊叹的产品，具有大量的自定义，但有时还会使人感到困惑，这也适用于文档的某些部分。navigationOptions在当前版本状态下，对于所有屏幕都是常见的，但是"可用导航选项的列表取决于导航器，屏幕的添加到了。"https://reaectnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator，因此header选项不起作用，因为它不适合TabNavigator本身。
关于哪种方法是最好的问题，取决于您想要在应用程序本身的导航中完成的方法。如果将TabNavigator放置在StackNavigator中，则标题组件对于TabNavigator内的所有选项卡将是常见的，这意味着TAB转换将生效，但标头不会从其顶部位置移动。另一方面，如果您选择在每个选项卡中嵌套StackNavigator，则标题将在每个选项卡中呈现，这意味着标头将沿Tab Transition Animation移动。
我进行了一个快速的演示，让您看到差异，如果您想玩它，代码也可用。
我知道这是问题已经有一个答案，但是我想展示我能够使用React Navigation > 5.x.x为自己做这项工作的方式。
Juan的答案描述了设置此设置的最佳方法，但也显示了它的完成方式，以便人们可以理解导航的外观对我们的视觉学习者也有所帮助。当时我很难理解这有点困难，但希望它将在将来对其他人有所帮助。
我找到了最好的方法是通过分解应用程序路由的层次结构。对我来说，我看起来像这样。
LoginNavigation HomeNavigation
| |
LoginScreen RegisterScreen HomeStack ProfileStack
| |
HomesScreen ProfileScreen
我的LoginNavigation堆栈包含两个屏幕登录屏幕和注册屏幕。在我的应用程序中，我不需要在此处设置选项卡导航设置，因此将这些屏幕包裹在StackNavigator中是适当的。另一方面，我的寄水堆放包含一个主屏幕和个人资料屏幕。唯一的问题是我的屏幕包裹在不产生标头的TabNavigator中。
要解决此问题，我们实际上需要将我们的两个屏幕（HomeScreen＆amp; profilescreen）包装在StackNavigators中，然后用TabNavigator包装所有内容。意识到这一点后，这样做实际上更有意义。为什么？好吧，假设在我的主屏幕上，我有一些帖子，希望用户能够看到帖子和随附的所有评论。好吧，我不会为此设置另一个选项卡，因为那只是愚蠢的。相反，我们会像这样将其添加到Homestack导航中。
HomeNavigation
|
HomeStack ProfileStack
| |
HomesScreen PostScreen ProfileScreen
现在看着像Profilestack之类的东西，该堆栈可能有多个分支，例如设置，关注者，图片...希望展示结构可以帮助某人理解这一点，并帮助我。
下面是我的AppStackNavigator文件，可以在代码中查看结构。
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../screens/Login';
import Register from '../screens/Register';
import FirstProfileImage from '../screens/FirstProfileImage';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/Home';
import Profile from './../screens/Profile';
const LoginStack = createStackNavigator();
const HomeTabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const AppStack = createStackNavigator();
const LoginStackNavigator = () => (
<LoginStack.Navigator screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}}>
<LoginStack.Screen name="Login" component={Login}/>
<LoginStack.Screen name="Sign Up" component={Register}/>
<LoginStack.Screen name="Profile Image" component={FirstProfileImage}/>
</LoginStack.Navigator>
)
const HomeStackNavigator = () => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>
)
const ProfileStackNavigator = () => (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={Profile} />
</ProfileStack.Navigator>
)
const HomeTabNavigator = () => (
<HomeTabs.Navigator>
<HomeTabs.Screen name="HomeStack" component={HomeStackNavigator} />
<HomeTabs.Screen name="ProfileStack" component={ProfileStackNavigator} />
</HomeTabs.Navigator>
)
const AppStackNavigator = () => (
<AppStack.Navigator initialRouteName={'HomeScreen'} screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}} headerMode='none'>
<AppStack.Screen name="LoginScreen" component={LoginStackNavigator}/>
<AppStack.Screen name="HomeScreen" component={HomeTabNavigator}/>
</AppStack.Navigator>
)
export default AppStackNavigator;
我确实同意这有点过分，我们可以消除必须跟踪每个导航器的问题，但这是现在有效的，直到他们为此添加功能为止。希望这种解释有所帮助。感谢您参加我的TED Talk。
根据React-Navigation Tabnavigator Docs，没有标题NavigationOption。因此，当您编写以下代码时，您实际上是设置不存在的值，因此您正在做的事情不会影响任何内容。
navigationOptions: {
header: { visible: true },
}
可悲的是，在这种情况下您需要一个stacknavigator。
我使用的一般结构是这样，创建一个选项卡导航器，然后为每个选项卡渲染堆栈。在此示例中，我不想在我的LiveMap上有一个标头，但我可以在其他两个选项卡上。命名取决于您的任何意义。然后在每个堆栈中，我渲染有意义的屏幕。
const Tab = createBottomTabNavigator();
const TrainStack = createStackNavigator();
const MapStack = createStackNavigator();
const BusStack = createStackNavigator();
然后，每个堆栈呈现我想要的任何屏幕
const MapNavigator = () => {
return (
<MapStack.Navigator
initialRouteName="LiveMap"
screenOptions={{headerShown: false}}>
<MapStack.Screen name="Live Map" component={LiveMap} />
<MapStack.Screen name="Show Routes" component={AllRoutes} />
<MapStack.Screen name="Select Routes" component={SelectRoutes} />
</MapStack.Navigator>
);
};
和Tab Navigator将为每个标签渲染我的堆栈。
const MainNavigator = () => (
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'orange',
keyboardHidesTabBar: true,
}}
initialRouteName="Live Map">
<Tab.Screen
name="Buses"
component={BusNavigator}
options={{
tabBarLabel: 'Buses',
tabBarIcon: ({color, size}) => (
<BusIcon height={30} width={30} color={color} />
),
}}
/>
<Tab.Screen
name="Live Map"
component={MapNavigator}
options={{
tabBarLabel: 'Map',
tabBarIcon: ({color}) => (
<View
height={100}
width={100}
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: '#fff',
paddingTop: 8,
borderRadius: 70,
}}>
<MapIcon height={50} width={50} color="orange" />
</View>
),
}}
/>
<Tab.Screen
name="Trains"
component={TrainNavigator}
options={{
tabBarLabel: 'Trains',
tabBarIcon: ({color, size}) => (
<TrainIcon height={30} width={30} color={color} />
),
}}
/>
</Tab.Navigator>