Сделать Tab.Navigator пропадает на странице входа

Question

Итак ... У меня есть этот экран входа в систему, где он не был проверен (мне все еще не нужно, чтобы он был)

Когда пользователь нажимает «Acessar», мне нужно, чтобы он был перенаправлен на «Feed de Imagens ", в настоящий момент это работает, поэтому я хочу, чтобы нижняя панель не отображалась, когда пользователь находится на странице входа.

barraDeNavegacao. js:

import React from 'react';

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
//import { MaterialCommunityIcons } from '@expo/vector-icons';

import PaginaPrincipal from '../pages/paginaPrincipal';
import Mais from '../pages/mais';
import TirarFoto from '../pages/tirarFoto'
import Login from '../pages/login';

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const Tab = createMaterialBottomTabNavigator();


export default function HomeTabs() {
  return (
    <Tab.Navigator>     
      <Tab.Screen name="TirarFoto" component={TirarFoto} options={{ tabBarLabel: 'Tirar Uma Foto' }} />
      
      <Tab.Screen name="Mais" component={Mais}
        options={{ tabBarLabel: 'Mais' }} />
    </Tab.Navigator>
  );
}

function BarraDeNavegacao() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={Login} />
      <Stacl.Screen name="PaginaPrincipal" component={PaginaPrincipal} options={{ tabBarLabel: 'Feed de Imagens' }} />
    </Stack.Navigator>
  );
}

export default BarraDeNavegacao;

Прил. js

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BarraDeNavegacao from './components/barraDeNavegacao'
import Login from './pages/login'
const Stack = createStackNavigator();

function App() {

  return (
    <>    
      <NavigationContainer>
        <BarraDeNavegacao />
      </NavigationContainer>
    </>

  );
}

export default App;

Answer 1

Наиболее распространенный шаблон для достижения этого - создать экран, который находится на том же уровне, что и ваш экран навигации по вкладкам, а не является его дочерним элементом, чтобы вы могли перейти к другому стеку, в котором нет вкладок. Это иногда называют полноэкранным модальным шаблоном.

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}

const MainStack = createStackNavigator();
const RootStack = createStackNavigator();

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}

function RootStackScreen() {
  return (
    <RootStack.Navigator mode="modal">
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Navigator>
  );
}

Подробнее здесь https://reactnavigation.org/docs/modal/ и пример закуски expo здесь