BottomTabNavigator 未出现在屏幕底部答案

【问题标题】：BottomTabNavigator not appearing on bottom of screenBottomTabNavigator 未出现在屏幕底部
【发布时间】：2021-07-12 08:14:44
【问题描述】：

我一直在尝试在我的应用程序中实现 BottomTabNavigator。在输出中，底部选项卡出现在屏幕顶部，而不是底部。

请帮助我找出错误。

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import PassengerScreen from './Passenger';
import Lovedones from './Lovedones';


import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default App=() => ( 
<NavigationContainer>
    <Drawer.Navigator initialRouteName="Passenger" drawerPosition="right" > 
        <Drawer.Screen name="Passenger" component={PassengerScreen} options= {{ title:'Passenger'}} />
        <Drawer.Screen name="Lovedones" component={Lovedones} options= {{ title:'loved ones!!'}} />
      </Drawer.Navigator>
  </NavigationContainer>
);

Passenger.js

import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';


import MapsScreen from './MapScreen';
import Driver from './Driver';
import EmergencyStack from './EmergencyScreen';
import AccountStack from './AccountScreen';



import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaView, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export default PassengerScreen=() => (
<SafeAreaView>
<Passenger/>
</SafeAreaView>
);

const Tab = createBottomTabNavigator();

Passenger=() => (
    <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }} >
      <Tab.Screen name="Account" component={AccountStack} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
      <Tab.Screen name="Emergency" component={EmergencyStack} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
    </Tab.Navigator>
);

在 App.js 中，我创建了一个带有乘客屏幕的抽屉。在Passenger.js 中，我为底部选项卡创建了函数Passenger，它出现在屏幕底部，但它却出现在屏幕顶部。在输出中，底部选项卡出现在屏幕顶部。

【问题讨论】：

标签： react-native react-navigation react-native-navigation react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

问题是您正在使用View (SafeAreaView) 类型包装标签导航器。

不要在PassengerScreen 中用SafeAreaView 包围Passenger 组件，它会呈现您的标签导航器。

不要使用SafeAreaView 包裹导航器，而是使用SafeAreaView 包裹您在屏幕组件中呈现的视图。

https://reactnavigation.org/docs/handling-safe-area/

出现这种行为似乎是因为将要从顶部开始呈现 View 类型，而底部选项卡是相对于该父级 View 呈现的。您尚未设置高度，因此包含您的标签的 SafeAreaView 可能几乎没有任何高度（如果有的话）（从您问题中的图片判断）。所以另一个解决方法是使SafeAreaView 更大。例如，您可以在SafeAreaView 上设置flex: 1。

【讨论】：

【解决方案2】：

问题是你用 SafeAreaView 包裹你的 PassengerScreen，它是你的 Passenger 的父级 - 标签屏幕

所以对于 Parent：PassengerScreenSafeAreaView(View) 没有提到样式 - flex:1 所以其中的孩子也没有分配任何空间/布局，所以它坚持显示在屏幕布局的顶部。

export default PassengerScreen=() => (
   <SafeAreaView style={{flex:1}}>
      <Passenger/>
   </SafeAreaView>
);

或者直接返回 Passenger 的 TAB 组件而不用任何视图包装。

【讨论】：