React native 使选项卡。导航器在登录页面上消失

所以。。。我有一个未经验证的登录屏幕（我仍然不需要验证）

当用户单击“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;

从“React”导入React；
从“@react navigation/material bottom tabs”导入{createMaterialBottomTabNavigator}；
//从“@expo/vector icons”导入{MaterialCommunityIcons}；
从“../pages/PaginaPrincipal”导入PaginaPrincipal；
从“../pages/Mais”导入MAI；
从“../pages/TirarFoto”导入TirarFoto
从“../pages/Login”导入登录名；
从'@react navigation/stack'导入{createStackNavigator}；
const Stack=createStackNavigator（）；
const Tab=createMaterialBottomTabNavigator（）；
导出默认函数HomeTabs（）{
返回(
);
}
函数BarraDeNavegacao（）{
返回(
);
}
导出默认的BarraDeNavegacao；

App.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;

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“./components/BarraDeNavegacao”导入BarraDeNavegacao
从“./pages/Login”导入登录名
const Stack=createStackNavigator（）；
函数App（）{
返回(
);
}
导出默认应用程序；

实现这一点的最常见模式是创建一个与选项卡导航屏幕处于同一级别的屏幕，而不是它的子屏幕，以便您可以导航到没有选项卡的其他堆栈。这有时称为全屏模式

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

功能主屏幕（{navigation}）{
返回(
这是主屏幕！
navigation.navigate（'MyModal'）}
title=“打开模式”
/>
);
}
函数DetailsScreen（）{
返回(
细节
);
}
功能模块屏幕（{navigation}）{
返回(
这是一个模态！
navigation.goBack（）}title=“disclose”/>
);
}
const-MainStack=createStackNavigator（）；
const RootStack=createStackNavigator（）；
函数MainStackScreen（）{
返回(
);
}
函数RootStackScreen（）{
返回(
);
}

这里有更多细节

---

例如，实现这一点的最常见模式是创建一个与选项卡导航屏幕处于同一级别的屏幕，而不是它的子屏幕，以便您可以导航到没有选项卡的其他堆栈。这有时称为全屏模式

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

功能主屏幕（{navigation}）{
返回(
这是主屏幕！
navigation.navigate（'MyModal'）}
title=“打开模式”
/>
);
}
函数DetailsScreen（）{
返回(
细节
);
}
功能模块屏幕（{navigation}）{
返回(
这是一个模态！
navigation.goBack（）}title=“disclose”/>
);
}
const-MainStack=createStackNavigator（）；
const RootStack=createStackNavigator（）；
函数MainStackScreen（）{
返回(
);
}
函数RootStackScreen（）{
返回(
);
}

这里有更多细节

---

还有一个世博快餐的例子

看看这些文档。您需要一个指向

选项卡导航器

和

登录

屏幕的父导航器。您好，谢谢您的回复，我做到了，但是我如何使用我创建的其他功能？它说：每个模块只允许一个默认导出。（36:0）我已经更新了代码看一下文档。您需要一个指向

选项卡导航器

和

登录

屏幕的父导航器。您好，谢谢您的回复，我做到了，但是我如何使用我创建的其他功能？它说：每个模块只允许一个默认导出。（36:0）我已经更新了代码