SafeAreaView不在根目录下使用MaterialTopTabNavigator

Question

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

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

根据React-Navigation文档，应该有一个tabBarOptions配置允许你覆盖forceInset（SafeAreaView）的safeAreaInset道具。然而，确保我们安装了最新的反应导航包后，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中的任何StackNavigators都会获得双重填充，因为react-navigation会再次在这些屏幕上自动应用SafeAreaView。

Answer 1

您可以在顶部选项卡视图周围添加一个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,
  }
);

Answer 2

我选择不要太过破解原来的导航仪。我没有添加额外的复杂性，而是简单地将以下默认导航属性添加到每个StackNavigator路由中，以确保它们不会因在原始SafeAreaView中呈现而添加额外的填充。

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

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