SafeAreaView 不能在根目录下与 MaterialTopTabNavigator 一起使用

Question

我们在应用程序的根目录中使用MaterialTopTabNavigator( https://reactnavigation.org/docs/en/material-top-tab-navigator.html )。根据 react-navigation 文档，默认情况下应该有一个 SafeAreaView 应用于 TabNavigator。

它似乎只是将插图应用于屏幕顶部，因此（或者我只能假设），底部没有应用填充，这导致 iPhoneX 等手机和其他较大的设备有重叠。

根据 React-Navigation 文档，应该有一个tabBarOptions配置允许您覆盖( )的forceInset道具。但是，在确保我们安装了最新的 react-navigation 包后，无处可寻。SafeAreaViewsafeAreaInsetsafeAreaInset

有没有办法将插图直接应用于 MaterialTopTabNavigator?

我们的 MainNavigator 如下所示：

const MainNavigator = createMaterialTopTabNavigator(
  {
    Group: {
      screen: GroupStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'group-work'} color={'#FFF'}/>
        ),
      },
    },
    Stats: {
      screen: StatisticsStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'insert-chart'} color={'#FFF'}/>
        ),
      },
    },
    GroupRoundsTab: {
      screen: GroupRoundStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'group'} color={'#FFF'}/>
        ),
        tabBarLabel: 'Rounds',
      },
    },
    MoreTab: {
      screen: MoreStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'more-vert'} color={'#FFF'}/>
        ),
        tabBarLabel: 'More',
      },
    },
  }, {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    lazy: true,
    tabBarOptions: {
      upperCaseLabel: false,
      labelStyle: {
        fontSize: 10,
        margin: 0,
      },
      indicatorStyle: {
        backgroundColor: '#FFF',
      },
      style: {
        backgroundColor: PRIMARY_COLOUR,
      },
      tabStyle: {
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
      },
      showIcon: true,
    },
  });

我们找到的唯一解决方案是将我们的整个应用程序包装在一个中SafeAreaView，如下所示：

<StatusBar barStyle="dark-content"/>
<SafeAreaView style={{ flex: 1 }}>
    <AppContainer/>
    <OfflineNotice/>
</SafeAreaView>

这里的巨大缺点是主 TabNavigation 中的任何 StackNavigator 都会得到双重填充，因为 react-navigation 会SafeAreaView再次自动在这些屏幕上应用。

Answer 1

我选择不对原始导航器进行太多修改。我没有增加额外的复杂性，而是简单地将以下默认导航属性添加到每个路线，StackNavigator以确保它们不会因在原始SafeAreaView.

defaultNavigationOptions: {
    headerForceInset: {
        top: 'never',
        bottom: 'never',
    },
},

这可确保所有内部屏幕和外部屏幕都正确填充。这不是一个理想的解决方案，但至少在需要进行更改时很容易调整。