ios - iPhone 11 上的 SafeAreaView 实施

Question

我正在尝试添加一个 SafeAreaView，这样我的图标就不会像图中所示那样被挤压在一起。

但似乎 SafeAreaView 只是将内容向上推。

这就是我目前实现它的方式/

const BottomTabs = () => (
  <SafeAreaView style={styles.container}>
    <DevSupport />
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={FeaturedScreen}
        options={{
          unmountOnBlur: true,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <Icons.IconHome width={ICON_SIZE} height={ICON_SIZE} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

关于我哪里出错的任何提示？还是我只是在错误的屏幕上添加了 SafeAreaView？

如果没有 SafeArea，它看起来如下所示：

Answer 1

BottomTab 具有 SafeAreaView，因此您无需将其包装在 SafeAreaView 中。

const BottomTabs = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="Home"
      component={FeaturedScreen}
      options={{
        unmountOnBlur: true,
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <Icons.IconHome width={ICON_SIZE} height={ICON_SIZE} color={color} />
        ),
      }}
    />
  </Tab.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});