我想知道如何从嵌套在材质底部标签栏上的堆栈导航器中的特定屏幕隐藏底部标签栏
这是我的堆栈导航器代码
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>
);
}
这是我的材料底部标签导航器的代码
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构建我的项目。
我的依赖项（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
}
答案 0 :(得分：38)
在导航时，我几乎遇到了与父级相同的问题，而对于孩子来说，堆栈导航几乎没有相同的问题，因此无法重新排列屏幕层。因此，我寻找了另一种解决方案，从docs中我发现，父级导航UI始终显示在子级上。 但是docs也提供了一个很好的示例，说明如何从子内部更改父头。因此，我以该示例为例，以实现标签栏的可见性。这就是我的实现方式。
因此，我有一个带有“主页”，“联系人”和“更多”的标签栏导航，并且在每个标签内都有一个堆栈。我隐藏选项卡的屏幕位于CameraView中，而该屏幕是“更多”选项卡中的堆栈屏幕。
- 个人资料
- CameraView（在这里我要隐藏标签栏）
导航：
如您所见，我从一种方法中获得了标签栏的可见性。
--fix方法getTabBarVisibility：
这是我检查路线名称是否是我在StackNavigation中定义的CameraView的地方。
<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>
以及组件MoreNavigation：
这是我的“更多”堆栈导航，您可以在其中看到屏幕名称为CameraView。
getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'CameraView') {
return false;
}
return true;
}
答案 1 :(得分：9)
您应该尝试重新排列屏幕层，
原始
- TabBar
- 池塘（栈）
- PondScreen
- DetailScreen
- 库存
- 其他
相反，尝试在顶部放置一个顶盖
- TopStack
- TabBar
- PondScreen
- 库存
- 其他
- 详细信息
这应该能够在每个屏幕中隐藏底部的标签栏或标签标题
答案 2 :(得分：6)
技巧是在您的
中添加TabsStack，OtherStack或SomeOtherScreen <Stack.Navigator />通过<Stack.Screen />
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="TabsStack" component={TabsStack} />
<Stack.Screen name="SomeOtherScreen" component={SomeOtherScreen} />
<Stack.Screen name="OtherStack" component={OtherStack} />
</Stack.Navigator>
</NavigationContainer>
);
}
它记录在here
上答案 3 :(得分：1)
添加此功能以隐藏MyTabBar中的底部栏
const focusedOptions = descriptors[state.routes[state.index].key].options;
if (focusedOptions.tabBarVisible === false) {
return null;
}
MyTabBar
import { View, Text, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation }) {
const focusedOptions = descriptors[state.routes[state.index].key].options;
if (focusedOptions.tabBarVisible === false) {
return null;
}
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
在屏幕堆栈中添加底部栏可见性
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Profile') {
return false;
}
return true;
};
在主标签导航器中添加选项
const MainAppNavigator = ({userToken}) => {
return (
<NavigationContainer>
{!userToken ? (
<AuthNavigator />
) : (
<Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
<Tab.Screen
name={'Dashboard'}
component={DashboardStackScreen}
/>
<Tab.Screen
name={'More'}
component={MoreStackScreen}
options={({route}) => ({
tabBarVisible: getTabBarVisibility(route),
})}
/>
</Tab.Navigator>
)}
</NavigationContainer>
);
};
在更多堆栈中添加个人资料屏幕
const MoreStack = createStackNavigator();
export default class MoreStackScreen extends React.Component {
render() {
return (
<MoreStack.Navigator initialRouteName={'More'}>
<MoreStack.Screen
name={'More'}
component={More}
/>
<MoreStack.Screen
name={'Profile'}
component={Profile}
/>
</MoreStack.Navigator>
);
}
}
答案 4 :(得分：1)
可接受的答案很好，但是您可能希望内联进行，并使用getFocusedRouteNameFromRoute是安全的。此代码与接受的答案相同：
<Tabs.Screen
name="Home"
component={HomeStack}
options={({ route }) => ({
tabBarVisible: ((route) => {
const routeName = getFocusedRouteNameFromRoute(route) ?? ""
if (routeName === "CameraView") {
return false
}
return true
})(route),
})}
/>
答案 5 :(得分：0)
您无需使用键盘侦听器并更改您的 AndroidManifest.xml 文件，只需添加此 tabBarOptions 道具即可解决此问题：
<Tab.Navigator
tabBarOptions={{
keyboardHidesTabBar: true,
}}>
</Tab.Navigator>