Реагировать на навигацию 5 скрыть панель вкладок от стека

Question

Я хотел знать, как скрыть нижнюю панель вкладок от указанного c экрана внутри моего стекового навигатора, который вложен в нижнюю панель вкладок материала

Это мой код для моего стекового навигатора

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 для создания своего проекта.

Мои зависимости (пакет. 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
}

Answer 1

У меня была почти такая же проблема с tabnavigation, как у parent и stacknavigation, как у childs, и перестановка моего слоя экрана не была возможной. Поэтому я искал другое решение и из docs я обнаружил, что родительский интерфейс навигации всегда отображается на дочернем элементе. Но docs также дал отличный пример того, как изменить родительский заголовок из дочернего элемента. Поэтому я взял этот пример и реализовал его для видимости вкладок. Вот как я это реализовал.

Итак, у меня есть навигация по вкладкам с Home, Contacts и More, и внутри каждой вкладки у меня есть стек. Экран, на котором я скрываю панель вкладок, находится в CameraView, а этот экран является стековым экраном на вкладке «Дополнительно».

• Домашняя страница
• Контакты
• Подробнее

  • Профиль
  • CameraView (здесь я хочу скрыть панель вкладок)

Tabnavigation:

Как видите, я получаю видимость панели вкладок из метода.

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

Это я проверяю если название маршрута - CameraView, которое я определил в StackNavigation.

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>

Answer 2

Хитрость заключается в том, чтобы добавить 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>
  );
}

это задокументировано как здесь

Answer 3

Вы должны попытаться изменить порядок слоев экрана,

Оригинал

• TabBar
  • Пруд (стек)
    • PondScreen
    • DetailScreen
  • Фондовая
  • Другое

Вместо этого попробуйте установить верхний стек поверх

• TopStack
  • TabBar
    • PondScreen
    • Фондовая
    • Другие
  • Подробности

Это должно быть в состоянии скрыть нижнюю панель вкладок или заголовок вкладки на каждом экране

Answer 4

Я не могу добавить комментарий, потому что моя репутация моложе 50 лет: D Я новичок и сейчас не знаю, как добавить TopStack поверх TabBar. Вы можете опубликовать свой пример?