React Native BottomTabNavigator 删除空格

Question

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

到目前为止，这是我的实现：

详细信息Navigation.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;

Answer 1

iPhone X 及以上设备上的white space称为安全区域，其存在是为了确保根据设备和上下文进行适当的插入。 有关详细信息，请参阅官方人机界面指南。

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

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

Answer 2

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

<SafeAreaView> 
<WorkersNavigation /> 
</SafeAreaView>

Answer 3

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

Answer 4

在您的 TabNavigator 屏幕选项中添加以下行：

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

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

Answer 5

对于删除上部空白：

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