IT技术 - React navigation 5 从堆栈导航器中隐藏标签栏 - 吾爱随笔录

React navigation 5 从堆栈导航器中隐藏标签栏

IT技术 javascript reactjs react-native react-navigation expo

2021-05-02 03:13:55

我想知道如何从嵌套在材料底部标签栏上的堆栈导航器内的特定屏幕隐藏底部标签栏

这是我的堆栈导航器代码

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
}

4个回答

我在 tabnavigation 作为父项和 stacknavigation 作为子项时遇到了几乎相同的问题，并且重新排列我的屏幕层不是一个选项。所以我寻找了另一种解决方案，从文档中我发现父导航 UI 总是显示在孩子身上。但是文档还提供了一个很好的示例，说明如何从子项中更改父标题。所以我拿了那个例子并实现了它的标签栏可见性。这就是我实现它的方式。

所以我有一个带有主页、联系人等的标签栏导航，在每个标签内我都有一个堆栈。我隐藏标签栏的屏幕在 CameraView 中，该屏幕是更多选项卡中的堆栈屏幕。

家
联系人
更多的
- 轮廓
- 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>

方法 getTabBarVisibility：

这是我检查路线的名称是否是我在 StackNavigation 中定义的 CameraView。

getTabBarVisibility = (route) => {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : '';

  if (routeName === 'CameraView') {
    return false;
  }

  return true;
}

和组件 MoreNavigation：

这是我对 More 的堆栈导航，可以看到屏幕名称是 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>

你应该尝试重新排列你的屏幕层，

原来的

标签栏

池塘（堆叠）

池塘屏风

详细画面

库存

其他

相反，尝试设置顶部堆栈

顶栈

标签栏

池塘屏风

库存

其他

细节

那应该能够隐藏每个屏幕中的底部标签栏或标签标题

接受的答案很好，但您可能希望内联进行，并使用getFocusedRouteNameFromRoute以确保安全。此代码与接受的答案相同：

<Tabs.Screen
    name="Home"
    component={HomeStack}
    options={({ route }) => ({
        tabBarVisible: ((route) => {
            const routeName = getFocusedRouteNameFromRoute(route) ?? ""

            if (routeName === "CameraView") {
                return false
            }

            return true
        })(route),
    })}
/>

诀窍是将 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>
  );
}

它记录在这里

其它你可能感兴趣的问题

上一篇计算已切片文件的估计打印时间下一篇Ultimaker 层分辨率与喷嘴尺寸