React Navigation V5 Скрыть нижние вкладки

Question

Я хотел бы иметь возможность скрывать вкладки на экране с помощью React Native Navigation v5.

Я читал документацию, но не похоже, что они обновили это для v5 и это относится к

вот мой код:

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={ProfileStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

То, что я пробовал:

1. Доступ к параметрам функционировать и скрывать таким образом.
2. Передача tabBarVisible в качестве опоры для экрана.

То, о чем я прошу, это то, как правильно скрывать вкладки на экранах в React Navigation v5.

Answer 1

У меня была эта проблема, и я не мог найти решение даже в официальных документах (из-за проблем в github возникли неработающие ссылки) после некоторых испытаний и исследований я нашел решение для меня Чтобы это произошло из навигатора на нижней вкладке компонент

<Tab.Navigator tabBarOptions={stackOptions} >
  <Tab.Screen
    name={"market"}
    component={MarketNavigator}
    options={navigation => ({
      // tabBarIcon: ,
      tabBarVisible: navigation.route.state.index > 0 ? false : true
    })}
  />
</Tab.Navigator>

Надеюсь, это кому-нибудь поможет!

Answer 2

Если вы ищете вложенный экран, видимый, тогда параметры панели вкладок следует скрыть, чем использовать это простое условие в функциях StackNavigator.

  function HistoryStack({navigation, route}) {
if (route.state.index === 0) {
 navigation.setOptions({tabBarVisible: true});
 } else {
 navigation.setOptions({tabBarVisible: false});
}
return (
<Historys.Navigator initialRouteName={Routes.History}>
  <Historys.Screen
    name={Routes.History}
    component={History}
    options={{headerShown: false}}
  />
  <Historys.Screen
    name={Routes.HistoryDetails}
    component={HistoryDetails}
    options={{headerShown: false}}
  />
</Historys.Navigator>
  );
}

Answer 3

У вас есть ссылка на API именно для этого. Читать: tabBarVisible

Answer 4

Приведенный выше ответ поможет вам удалить нижние вкладки из root навигации. Если вы хотите удалить нижние вкладки с указанного c экрана, такого как Главный экран или Экран настроек, вам необходимо динамически изменять параметры навигации.

Для динамического изменения параметров навигации вам потребуется концепция:

• React.Context
• useNavigationState

Context - будет динамически изменять значение navigationOption, т.е. либо скрывать нижние вкладки, либо нет. Мы можем выбрать MobX или Redux, чтобы сделать то же самое.

UseNavigationState - поможет контексту узнать, на каком экране находится пользователь.

Нам нужно создать контекст в отдельный файл. js, чтобы Home. js и Настройки. js могли получить к нему доступ на всех других экранах.

import * as React from 'react';
import { View, Text } from 'react-native'
import { NavigationContainer, useNavigationState, useRoute } from '@react-navigation/native';
const Tab = createBottomTabNavigator();
const Context = React.createContext();

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity } from 'react-native-gesture-handler';


const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();

function SettingsScreen({ navigation }) {
  return (
    <View>
      <Text>
        Setting
      </Text>
    </View>
  );
}

function Home({ navigation }) {
  const rout = useNavigationState(state => state);
  const { screen, setScreen } = React.useContext(Context);
  setScreen(rout.index);
  return (
    <View>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate("Settings");
        }}
      >
        <Text>
          Home
        </Text>
      </TouchableOpacity>
    </View>
  );
}

function SettingsStackScreen({ navigation }) {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
    </SettingsStack.Navigator>
  )
}

function ProfileStackScreen({ navigation }) {
  const { screen, setScreen } = React.useContext(Context)
  if (screen == 0) {
    navigation.setOptions({ tabBarVisible: true })
  } else {
    navigation.setOptions({ tabBarVisible: false })
  }
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Home" component={Home} />
      <ProfileStack.Screen name="Settings" component={SettingsScreen} />
    </ProfileStack.Navigator>
  )
}

function BottomNav({ navigation }) {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={ProfileStackScreen} />
      <Tab.Screen name="Settings" component={SettingsStackScreen} />
    </Tab.Navigator>
  );
}


export default function App() {
  const [screen, setScreen] = React.useState(0);

  return (
    <Context.Provider value={{ screen, setScreen }}>
      <NavigationContainer>
        <BottomNav />
      </NavigationContainer>
    </Context.Provider>
  );
}

Здесь на экране есть флаг, который проверяет индекс навигации и удаляет нижнюю навигацию для всех экранов, расположенных в ProfileStackScreen.

Answer 5

Предположим, что вы хотите скрыть вкладки при входе в настройки. Просто добавьте навигацию в ваш конструктор:

function SettingsStackScreen({ navigation ) {
    navigation.setOptions({ tabBarVisible: false })
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

Этот код должен работать.