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

Question

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

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

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

有没有办法将插图直接应用于 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

您可以在顶部选项卡 View 周围添加一个 SafeAreaView 包装器，如下所示:

import {
  MaterialTopTabBar,
  SafeAreaView,
  createAppContainer,
  createMaterialTopTabNavigator,
} from 'react-navigation';

class MaterialTopTabBarWrapper extends React.Component {
  render() {
    return (
      <SafeAreaView
        style={{ backgroundColor: '#2196f3' }}
        forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}>
        <MaterialTopTabBar {...this.props} />
      </SafeAreaView>
    );
  }
}


let Tabs = createMaterialTopTabNavigator(
  {
    /* your routes */
  },
  {
    tabBarComponent: MaterialTopTabBarWrapper,
  }
);