如何从 React Native 的特定屏幕中删除底部导航栏？

Question

这是我的项目结构：

▼ MyProject
    ► .expo
    ► node_modules
    ▼ backend
    
        ► node_modules
        ► database
            database.js
        ▼ models
            Restaurant.js
            Category.js
        ► routes
        
            ► api
            
                CategoryRouter.js
                RestaurantRouter.js
    
        .env
    
        server.js
    
        package-lock.json
    
        package.json
    ▼ frontend
        ► assets
        ▼ components
        
            CategoryItem.js
        
            HomeHeader.js
            index.js
            RestaurantCard.js
            BottomNavigationBar.js
            BottomNavigationHomeButton.js
        ► constants
        ▼ screens
            Home.js
            Login.js
            RestaurantDetail.js
    App.js
    app.json
    babel.config.js
    package-lock.json
    package.json

所以我的 App.js 看起来像这样：

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import BottomNavigationBar from './frontend/components/BottomNavigationBar';
import BottomNavigationHomeButton from './frontend/components/BottomNavigationHomeButton';

import Home from './frontend/screens/Home';
import RestaurantDetail from './frontend/screens/RestaurantDetail';
import Login from './frontend/screens/Login';

const Tab = createBottomTabNavigator();

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent'
  }
};

const App = () => {
  return (
    <NavigationContainer theme={theme}>
      <Tab.Navigator
        tabBar={() => <BottomNavigationBar />}
        screenOptions={{ headerShown: false }}
      >
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="RestaurantDetail" component={RestaurantDetail} />
        <Tab.Screen name="Login" component={Login} />
      </Tab.Navigator>
      {/* Pass navigation prop to CustomRoundButton */}
      <BottomNavigationHomeButton />
    </NavigationContainer >
  );
};

export default App;

我想做的就是禁用登录屏幕上的 BottomNavigationBar。

我该怎么做？

更新

所以我设法让它像这样工作：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import BottomNavigationBar from './frontend/components/BottomNavigationBar';
import BottomNavigationHomeButton from './frontend/components/BottomNavigationHomeButton';

import Home from './frontend/screens/Home';
import RestaurantDetail from './frontend/screens/RestaurantDetail';
import Login from './frontend/screens/Login';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent'
  }
};

const MainTabs = () => {
  return (
    <>
      <Tab.Navigator
        tabBar={() => <BottomNavigationBar />}
        screenOptions={{ headerShown: false }}
      >
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="RestaurantDetail" component=.{RestaurantDetail} />
      </Tab.Navigator>
      <BottomNavigationHomeButton />
    </>
  );
};

const App = () => {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="MainTabs" component={MainTabs} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

这是最佳方式吗？

Answer 1

您可以使用

listeners

上的

Tab.Screen

道具来完成此操作，以便在按下登录选项卡时打开一个新屏幕。

Tab.Screen

组件上的

MainTabs

应如下所示。

<Tab.Screen
   name="LoginFacade" 
   component={EmptyComponent}
   listeners={({navigation}) => ({
          tabPress: e => {
            e.preventDefault();
            navigation.dispatch(StackActions.push('Login'));
          },
        })} 

/>

并且您需要保持

Stack.Navigator

的结构，如更新中所示。