【问题标题】：React Native BottomTabNavigator remove white spaceReact Native BottomTabNavigator 删除空格
【发布时间】：2020-11-26 19:25:09
【问题描述】：

我的底部标签导航器出现问题。我的标签页和 iPhone 11 模拟器的屏幕末端之间出现空白。在 iPhone 8 模拟器上，我没有这些空白。选项卡上方还有一个小的空白区域。我怎样才能删除这个空间？我无法找到解决方案，而且我的时间不多了。谢谢！

这是我目前的实现：

DetailsNavigation.js

  const DetailsNavigation = ({ route }) => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeBackgroundColor: colors.primary,
        activeTintColor: colors.secondary,
        inactiveBackgroundColor: colors.secondary,
        inactiveTintColor: colors.primary,
        labelStyle: {
          fontSize: 13,
          marginBottom: 5,
        },
      }}
    >
      <Tab.Screen
        name="DetailsScreen"
        options={{
          title: "Portfolio",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="account-box" size={24} color={color} />
          ),
        }}
        children={() => <DetailsScreen worker={route.params} />}
      />
      <Tab.Screen
        name="RatingScreen"
        component={RatingScreen}
        options={{
          title: "Bewertungen",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="star" size={24} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};
export default DetailsNavigation;

DetailsNavigation.js在这里实现：

WorkersNavigation.js

const WorkersNavigation = (props) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="WelcomeScreen"
        component={WelcomeScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      <Stack.Screen
        name="WorkersScreen"
        component={WorkersScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      <Stack.Screen
        name="DetailsNavigation"
        component={DetailsNavigation}
        options={{ headerShown: false }}
      ></Stack.Screen>
    </Stack.Navigator>
  );
};

export default WorkersNavigation;

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

在 iPhone X 及以上设备上找到的white space 称为安全区域，其存在是为了确保根据设备和上下文进行适当的插入。详情请参考官方Human Interface Guidelines。

react-navigation 的 BottomTabNavigator 支持 default BottomTabBar 开箱即用的安全区域，因此要删除其下的 SafeArea，您需要覆盖为 BottomTabNavigator 提供的设置。

<Tab.Navigator
    tabBarOptions={ {
        ...
        safeAreaInsets: {
            bottom: 0,
        },
    } }
>
...
</Tab.Navigator>

【讨论】：

【解决方案2】：

我认为你像这样包裹在 WorkersNavigation 之外

<SafeAreaView> 
<WorkersNavigation /> 
</SafeAreaView>

【讨论】：

【解决方案3】：

    screenOptions={({route}) => ({
    tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
    tabBarLabelStyle: {
      fontWeight: '600',
      fontSize: 12,
    },
    tabBarActiveTintColor: '#f1c522',
    tabBarInactiveTintColor: '#f4f1de',
    tabBarActiveBackgroundColor: '#436332',
    tabBarInactiveBackgroundColor: '#436332',
  })}

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。
请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【解决方案4】：

在您的 TabNavigator screenOptions 中添加此行：

tabBarItemStyle: {borderWidth: 1, borderColor:'#101010'},
tabBarStyle: {paddingBottom:0, backgroundColor: '#101010'},

如果您使用，请将其删除。

【讨论】：

【解决方案5】：

在删除底部空间的情况下，我需要为 tabBarStyle 和 tabBarItemStyle 设置高度：

<Tab.Navigator
      initialRouteName={ScreenNames.Home}
      screenOptions={{
        tabBarItemStyle: {
          height: 53,
        },
        tabBarStyle: {
          height: 53,
        },
      }}>

去除上面的空白：

<Tab.Navigator
  initialRouteName={ScreenNames.Home}
  screenOptions={{
    tabBarStyle: {
      borderTopWidth: 0,
      elevation: 0,
    },
  }}>

【讨论】：