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

Posted 2023-05-07

【中文标题】如何在 React Native 中隐藏底部操作栏

【英文标题】：How to hide the Bottom action bar in React Native

【发布时间】：2021-07-30 14:17:55

【问题描述】：

我在 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>


  );

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

【问题讨论】：

我不确定我是否关注你。但是你想要的是去除底部的白色区域，对吧？它被称为安全区域，您可以阅读文档来处理它。 reactnavigation.org/docs/handling-safe-area

@MicFung 是的，就是这样。我想删除安全区域。感谢您的文档

首先避免使用 SafeArea。是的，您将获得 StatusBar 区域的上边距...使用 SafeArea，但它也会添加 marginBottom 以使 ActionBar 可见

【参考方案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>
    );
  

这是输出：