react-native - 反应导航 5,在第二个堆栈屏幕上隐藏底部标签栏?
问题描述
我正在开发一个具有堆栈导航和底部标签导航的应用程序,我需要在第一个堆栈屏幕中显示底部标签栏,而不是在第二个堆栈屏幕中。这是我的导航代码:
const BottomTab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<NavigationContainer>
<BottomTab.Navigator>
<BottomTab.Screen name='StackNavigation' component={StackNavigation} options={{
tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
}} />
<BottomTab.Screen name='SecondTab' component={SecondTab} options={{
tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
}} />
<BottomTab.Screen name='Offers' component={Offers} options={{
tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
}} />
<BottomTab.Screen name='Profile' component={Profile} options={{
tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
}} />
</BottomTab.Navigator>
</NavigationContainer>
)
}
这是我的堆栈导航:
const StackNavigator = createStackNavigator();
const StackNavigation = () => {
return (
<StackNavigator.Navigator>
<StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
<StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
<StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
</StackNavigator.Navigator>
);
}
此代码有效,但仅适用于第一个堆栈导航和 OfficeDetails 页面,我需要隐藏我的标签栏。我怎样才能做到这一点?
解决方案
默认情况下,您必须将BottomTabNavigator
navigator 作为组件传递给StackNavigationWithTabs
并导出StackNavigationWithoutTabs
。
const StackNavigationWithTabs= createStackNavigator();
const StackNavigationWithTabs= () => {
return (
<StackNavigator.Navigator>
<StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
<StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
</StackNavigator.Navigator>
);
}
const BottomTab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<BottomTab.Navigator>
<BottomTab.Screen name='StackNavigationWithTabs' component={StackNavigationWithTabs} options={{
tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
}} />
<BottomTab.Screen name='SecondTab' component={SecondTab} options={{
tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
}} />
<BottomTab.Screen name='Offers' component={Offers} options={{
tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
}} />
<BottomTab.Screen name='Profile' component={Profile} options={{
tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
}} />
</BottomTab.Navigator>
)
}
const StackNavigator = createStackNavigator();
const StackNavigationWithoutTabs= () => {
return (
<NavigationContainer>
<StackNavigator.Navigator>
<StackNavigator.Screen name="BottomTabNavigator" component= {BottomTabNavigator} options={{ headerShown: false }} />
<StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
</StackNavigator.Navigator>
</NavigationContainer>
);
}
推荐阅读
- post - Swagger-ui 在 POST 请求的 curl 中应用不需要的编码
- python - 我不知道如何在一个文本框中输入并在另一个文本框中显示输出
- dataframe - 将 Symbol 参数传递给 @where 以使用 Julia 选择 DataFrame 的行
- amazon-web-services - AWS-CDK 和 Powershell Lambda
- c++ - 为什么我的函数返回 long long,返回 705032704?
- version-control - 无论如何在 ALM 上设置版本控制以与 Gitlab 同步?
- php - 重定向到详细信息站点并再次返回后如何保存用户过滤器输入
- javascript - 在html中加载脚本序列
- python - 使用 python-amazon-mws API 的 Amazon Feed
- hive - 重命名分区并设置新位置配置单元