反应导航5从堆栈导航器中隐藏标签栏

React navigation 5 hide tab bar from stack navigator(反应导航5从堆栈导航器中隐藏标签栏)

问题描述

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

这是我的堆栈导航器代码

从'react'导入反应；从'@react-navigation/stack'导入{ createStackNavigator }；从../screens/PondScreen/PondScreen"导入 PondScreen；从../screens/PondScreen/PondDetailScreen"导入 PondDetailScreen；const Stack = createStackNavigator();导出函数 PondStack() {返回 (
这是我的材料底部标签导航器的代码
从'react'导入反应；从'react-native'导入{视图}；从@react-navigation/material-bottom-tabs"导入 { createMaterialBottomTabNavigator }；从'@expo/vector-icons'导入{Entypo, Feather}；从'./StackNavigators'导入{ PondStack }；从'../screens/StockScreen'导入StockScreen；从'../screens/OrderScreen'导入OrderScreen；从../screens/SettingsScreen"导入 SettingsScreen；const Tab = createMaterialBottomTabNavigator();导出默认函数 BottomTab() {返回 (
我目前正在使用 Expo 来构建我的项目.
我的依赖项(package.json)
<代码>{"main": "node_modules/expo/AppEntry.js",脚本":{"开始": "展会开始","android": "expo start --android","ios": "展会开始 --ios","web": "expo start --web",弹出":博览会弹出"},依赖":{"@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",博览会":〜36.0.0"，反应":〜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",反应原生网络":〜0.11.7"},开发依赖":{"@babel/core": "^7.0.0",babel-preset-expo":~8.0.0"},私人":真}
 解决方案 
我遇到了几乎相同的问题，将 tabnavigation 作为父级，将 stacknavigation 作为子级，并且无法重新排列我的屏幕层.所以我从 docs 我发现父导航 UI 总是显示在孩子身上.但是 docs 也提供了一个很好的例子，说明如何从孩子.所以我举了这个例子并为标签栏的可见性实现了它.我就是这样实现的.
所以我有一个带有主页、联系人和更多的标签栏导航，并且在每个标签内我都有一个堆栈.我隐藏标签栏的屏幕位于 CameraView 中，该屏幕是更多标签中的堆栈屏幕.
首页
联系人
更多<块引用>
个人资料
CameraView(这里我想隐藏标签栏)
标签导航:
如您所见，我从方法中获得了标签栏的可见性.
<NavigationContainer><标签导航器><Tab.Screen name="Home" 组件={HomeNavigation}/><Tab.Screen name="Contacts" 组件={ContactNavigation}/>
方法 getTabBarVisibility:
这是我检查路线的名称是否是我在 StackNavigation 中定义的 CameraView.
getTabBarVisibility = (路由) =>{const routeName = route.state?route.state.routes[route.state.index].name: '';if (routeName === 'CameraView') {返回假；}返回真；}
还有MoreNavigation组件:
这是我的更多堆栈导航，您可以在其中看到屏幕名称是 CameraView.
<Stack.Navigator initialRouteName="More"><Stack.Screen name="More" 组件={More}/><Stack.Screen name="UserProfile" 组件={Profile}/><Stack.Screen name="CameraView" 组件={CameraView}/></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>
  )
}
I am currently using Expo to build my project.

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
}

 解决方案 
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.

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


  

  
Profile
  
CameraView (here I want to hide the tabbar)
  



Tabnavigation:

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>
Method getTabBarVisibility:

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;
}
And the component MoreNavigation:

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>


                        
这篇关于反应导航5从堆栈导航器中隐藏标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！