web-dev-qa-db-fra.com

React Navigation V5 Masquer les onglets inférieurs

J'aimerais pouvoir masquer les onglets sur un écran en utilisant React Navigation natif V5.

J'ai lu la documentation, mais cela ne semble pas être mis à jour cela pour V5 et il fait référence à la façon <V4 de faire des choses.

voici mon code:

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>
  );
}

Choses que j'ai essayées:

  1. Accéder aux options de la fonction et cacher de cette façon.
  2. Passez tabbarvisible comme un accessoire à l'écran.

Ce que je demande est, quelle est la bonne façon de masquer les onglets sur des écrans dans React Navigation V5.

javascriptreact-nativereact-navigationreact-native-navigation
8
Ash._

J'ai eu cette question et que je ne pouvais pas trouver une solution même dans les documents officiels (les problèmes de GitHub ont résulté des liens brisés) après quelques essais et recherches, j'ai trouvé une solution pour moi pour que cela se produise à partir du composant de navigateur en bas de l'onglet

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

J'espère que cela aide quelqu'un!

0
ishab acharya

Vous devrez restructurer votre navigation en ayant votre navigateur d'onglet imbriqué dans le navigateur de pile. Suivre les détails ici masquage-tabbar-in-écrans

De cette façon, il est toujours possible d'avoir un navigateur de pile imbriqué dans votre navigateur de votretab. SettingsStack

Avec cela, lorsque l'utilisateur est sur l'écran de configuration et l'écran de mise à jour de la mise à jour, la barre d'onglets est visible mais sur l'écran de profil, la barre d'onglets n'est pas.

import Home from './components/Home';
import Settings from './components/Settings';
import UpdateDetails from './components/UpdateDetails';
import Profile from './components/Profile';

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 Stack = createStackNavigator();
const StackSettings = createStackNavigator();
const Tab = createBottomTabNavigator();

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

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Settings" component={SettingsStack} />
    </Tab.Navigator>
  );
}


export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Profile" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
0
Mark

Utilisez-vous la recherche d'écran imbriqué visible que les options de barre d'onglets doivent être masquées que d'utiliser cette condition simple dans les fonctions 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>
  );
}
0
Safi Deraiya
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; // version 5.6.1
import { createStackNavigator } from "@react-navigation/stack"; // version 5.6.2

De mon inspection navigation.route.state.index aura une valeur lorsque vous navigation/appuyez sur un deuxième écran afin de créer une fonction

const shouldTabBarVisible = (navigation) => {
  try {
    return navigation.route.state.index < 1;
  } catch (e) {
    return true;
  }
};

et appelez-le dans BottomTab.Screen options

<BottomTab.Navigator
    initialRouteName='Home'
    tabBarOptions={{
        activeTintColor: "#1F2B64",
        showLabel: false,
    }}
>
    <BottomTab.Screen
        name='Home'
        component={HomeNavigator}
        options={(navigation) => ({
            tabBarIcon: ({ color }) => <TabBarIcon name='home' color={color} />,
            tabBarVisible: shouldTabBarVisible(navigation),
        })}
    />
</BottomTab.Navigator>
0
Gusto