如何在 React Native 中隐藏底部操作栏

Question

我在 React Native 中遇到问题，我想隐藏标签栏导航正下方的底部操作栏。

我想制作一个 Disney + App 克隆，这件事让我很受不了：

这是我的应用程序的底部，带有小操作栏

没有此操作栏的原始应用程序

我不知道该怎么做。 这是我的 App.js 代码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from './screens/HomeScreen';
import SearchScreen from './screens/SearchScreen';
import DownloadScreen from './screens/DownloadScreen';
import ProfilScreen from './screens/ProfilScreen';
import { iconSize, prefix, activeTabColor, inactiveTabColor, tabBarBackgroundColor, appTheme } from './utils/Constants';
import { ImageBackground } from 'react-native';
import DisneyImageBackground from './assets/home-background.png';

const Tab = createBottomTabNavigator();

export default function App() {

  const getTabColor = (focused) => {
    return focused ? activeTabColor : inactiveTabColor;
  }

  const getScreenOptions = (route) => {

  }

  return (
    <ImageBackground source={DisneyImageBackground} style={{ flex: 1 }} resizeMode="cover">

      <NavigationContainer theme={appTheme}>
        <Tab.Navigator 
          screenOptions={
            ({ route }) => ({
              tabBarIcon: ({ focused }) => {
                if (route.name === 'Home') {
                  return <Ionicons name={`${prefix}-home`} color={getTabColor(focused)} size={iconSize} />
                } else if (route.name === 'Search') {
                  return <Ionicons name={`${prefix}-search`} color={getTabColor(focused)} size={iconSize} />
                } else if (route.name === 'Download') {
                  return <Ionicons name={`${prefix}-download`} color={getTabColor(focused)} size={iconSize} />
                } else if (route.name === 'Profil') {
                  return <Ionicons name={`${prefix}-person`} color={getTabColor(focused)} size={iconSize} />
                }
              },
            })
          }
          tabBarOptions={{
            activeBackgroundColor: tabBarBackgroundColor,
            inactiveBackgroundColor: tabBarBackgroundColor,
            showLabel: false,
            style: {
              height: 55,
              borderTopWidth: 0.2,
              borderTopColor: '#2f313d'
            }
          }}>
          <Tab.Screen name='Home' component={HomeScreen} />
          <Tab.Screen name='Search' component={SearchScreen} />
          <Tab.Screen name='Download' component={DownloadScreen} />
          <Tab.Screen name='Profil' component={ProfilScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </ImageBackground>


  );
}

如果有人有解决方案，那将非常有帮助:) 谢谢

Answer 1

这是我的代码

App.js

import React, {useRef, useState, useEffect} from 'react';
import {
  FlatList,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import Home from './routes';
import {createAppContainer} from 'react-navigation';

const AppRoot = createAppContainer(Home);

class App extends React.Component {
  constructor(props) {
    super(props);
    this._navigator = null;
  }
  render() {
    alert('HI');
    return <AppRoot />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Routes.js

import React from 'react';

import {
  StyleSheet,
  View,
  Text,
} from 'react-native';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import Profile from './Profile';

const NotifyNavigation = createStackNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
  },
  {
    initialRouteName: 'Profile',
    defaultNavigationOptions: {
      headerTitleStyle: {
      },
    },
  },
);
NotifyNavigation.navigationOptions = ({navigation}) => {
  let {routeName} = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  navigationOptions.tabBarVisible = routeName === 'Profile';
  return navigationOptions;
};

const ProfileNavigation = createStackNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
  },
  {
    defaultNavigationOptions: {
      headerTitleStyle: {
        // fontFamily: 'SFProText-Regular',
      },
    },
  },
);
ProfileNavigation.navigationOptions = ({navigation}) => {
  let {routeName} = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  navigationOptions.tabBarVisible = routeName === 'Profile';
  return navigationOptions;
};

const ScheduleNavigation = createStackNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
  },
  {
    defaultNavigationOptions: {
      headerTitleStyle: {
        // fontFamily: 'SFProText-Regular',
      },
    },
  },
);
ScheduleNavigation.navigationOptions = ({navigation}) => {
  let {routeName} = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  navigationOptions.tabBarVisible = routeName === 'Profile';
  return navigationOptions;
};

/**
 * TabNavigation
 */
const TabNavigation = createBottomTabNavigator(
  {
    CalenderTab: {
      screen: ScheduleNavigation,
      navigationOptions: {
        tabBarIcon: ({focused}) => {
          return (
            <View style={styles.iconContainer}>
              <Text style={{color: 'white'}}>User</Text>
            </View>
          );
        },
      },
    },

    NotifyTab: {
      screen: NotifyNavigation,
      navigationOptions: {
        tabBarIcon: ({focused}) => {
          return (
            <View style={styles.iconContainer}>
              <Text style={{color: 'white'}}>Movies</Text>
            </View>
          );
        },
      },
    },

    ProfileTab: {
      screen: ProfileNavigation,
      navigationOptions: {
        tabBarIcon: ({focused}) => {
          return (
            <View style={styles.iconContainer}>
              <Text style={{color: 'white'}}>Series</Text>
            </View>
          );
        },
      },
    },
  },
  {
    initialRouteName: 'ProfileTab',

    navigationOptions: {
      gesturesEnabled: false,
    },
    tabBarOptions: {
      showLabel: false,
      style: {
        paddingTop: 5,
        backgroundColor: 'black',
        borderTopColor: '#e7e7e7',
        borderTopWidth: 2,
        height: 65,
      },
    },
  },
);

/**
 * Application Root
 */
const Root = createStackNavigator(
  {
    Main: TabNavigation,
  },
  {
    headerMode: 'none',
    mode: 'modal',
    navigationOptions: {
      gesturesEnabled: false,
    },
  },
);

// const AppContainer = createAppContainer(Root);
export default Root;

const styles = StyleSheet.create({
  iconContainer: {
    borderWidth: 1,
    borderColor: 'red',
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Screen1(Profile.js)

import React from 'react';
import {View, Text} from 'react-native';

export default class Profile extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#ddd',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Screen</Text>
      </View>
    );
  }
}

这是输出：