React Navigation 5从堆栈导航器隐藏标签栏 [英] React navigation 5 hide tab bar from stack navigator
问题描述
我想知道如何从堆栈导航器中嵌套在材料底部标签栏上的特定屏幕中隐藏底部标签栏
I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator that is nested on a material bottom tab bar
这是我的堆栈导航器代码
This is my code for my stack navigator
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import PondScreen from '../screens/PondScreen/PondScreen';
import PondDetailScreen from '../screens/PondScreen/PondDetailScreen';
const Stack = createStackNavigator();
export function PondStack() {
return (
<Stack.Navigator
initialRouteName="PondScreen"
headerMode="none"
mode="card"
>
<Stack.Screen
name="PondScreen"
component={PondScreen}
/>
<Stack.Screen
name="PondDetailScreen"
component={PondDetailScreen}
options={{
tabBarVisible: false
}}
/>
</Stack.Navigator>
);
}
这是我的材料底部标签导航器的代码
This is my code for my material bottom tab navigator
import React from 'react';
import { View } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Entypo, Feather } from '@expo/vector-icons';
import { PondStack } from './StackNavigators';
import StockScreen from '../screens/StockScreen';
import OrderScreen from '../screens/OrderScreen';
import SettingsScreen from '../screens/SettingsScreen';
const Tab = createMaterialBottomTabNavigator();
export default function BottomTab() {
return (
<Tab.Navigator
labeled={false}
initialRouteName="Pond"
activeColor="#EB3349"
inactiveColor="#888888"
backBehavior="none"
shifting={true}
barStyle={{
backgroundColor: '#FFFFFF'
}}
>
<Tab.Screen
name="Pond"
component={PondStack}
options={{
tabBarIcon: ({ color}) => (
<View style={{ flex: 1 }}>
<Entypo name="air" color={color} size={20} />
</View>
)
}}
/>
<Tab.Screen
name="Stock"
component={StockScreen}
options={{
tabBarIcon: ({ color }) => (
<View style={{ flex: 1 }}>
<Feather name="box" color={color} size={20} />
</View>
)
}}
/>
<Tab.Screen
name="Order"
component={OrderScreen}
options={{
tabBarIcon: ({ color}) => (
<View style={{ flex: 1 }}>
<Feather name="dollar-sign" color={color} size={20} />
</View>
)
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarIcon: ({ color}) => (
<View style={{ flex: 1 }}>
<Feather name="settings" color={color} size={20} />
</View>
)
}}
/>
</Tab.Navigator>
)
}
我目前正在使用Expo构建项目.
I am currently using Expo to build my project.
我的依赖项(package.json)
My dependencies (package.json)
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.5",
"@react-navigation/material-bottom-tabs": "^5.0.0",
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"@types/react-native": "^0.61.12",
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-paper": "^3.6.0",
"react-native-raw-bottom-sheet": "^2.0.6",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0"
},
"private": true
}
推荐答案
我几乎有一个相同的问题，即与父级制表符导航和与子级制表符的导航相同，并且无法重新排列屏幕层.因此，我寻找了另一种解决方案，并且从文档我发现，父级导航UI始终显示在子级上. 但是 docs 也提供了一个很好的示例，说明了如何从内部更改父标头孩子.因此，我以该示例为例，以实现标签栏的可见性.这就是我的实现方式.
I had almost the same issue with a tabnavigation as parent and stacknavigation as childs and rearranging my screen layer wasn't an option. So I looked for another solution and from the docs I found out that the parent navigation UI is always shown on the child. But the docs also gave a great example on how to change a parent header from within a child. So I took that example and implemented it for the tabbar visibility. This is how I implemented it.
因此，我有一个带有主页"，联系人"和更多"的标签栏导航，并且在每个标签内都有一个堆栈.我隐藏选项卡的屏幕位于CameraView中，而该屏幕是更多"选项卡中的堆栈屏幕.
So I have a tabbar navigation with Home, Contacts and More, and inside each tab I have a stack. The screen that I hide the tabbar in is in the CameraView, and that screen is a stackscreen in the More tab.
- 首页
- 联系人
- 更多
- Home
- Contacts
- More
- 个人资料
- CameraView(在这里我要隐藏标签栏)
- Profile
- CameraView (here I want to hide the tabbar)
导航:
如您所见，我从一种方法中获得了标签栏的可见性.
As you can see I get the visibility of the tabbar from a method.
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeNavigation} />
<Tab.Screen name="Contacts" component={ContactNavigation} />
<Tab.Screen
name="More"
component={MoreNavigation}
options={({ route }) => ({
tabBarVisible: this.getTabBarVisibility(route)
})}
/>
</Tab.Navigator>
</NavigationContainer>
方法getTabBarVisibility:
这是我检查路线名称是否为我在StackNavigation中定义的CameraView的地方.
This is were I check if the name of the route is CameraView which I defined in the StackNavigation.
getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'CameraView') {
return false;
}
return true;
}
以及组件MoreNavigation:
这是我在更多"上的堆栈导航，您可以在其中看到屏幕名称为CameraView.
This is my stacknavigation for More, where you can see that the screen name is CameraView.
<Stack.Navigator initialRouteName="More">
<Stack.Screen name="More" component={More}/>
<Stack.Screen name="UserProfile" component={Profile}/>
<Stack.Screen name="CameraView" component={CameraView}/>
</Stack.Navigator>
这篇关于React Navigation 5从堆栈导航器隐藏标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
