Question

我们在应用程序的根目录使用MaterialTopTabNavigator（https://reactnavigation.org/docs/en/material-top-tab-navigator.html）。根据反应导航文档，默认情况下应将一个SafeAreaView应用于TabNavigator。

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

根据React-Navigation文档，应该有一个tabBarOptions配置，该配置允许您覆盖forceInset（SafeAreaView）的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

您可以在顶部标签视图周围添加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中进行渲染而没有添加额外的填充。 / p>

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

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

SafeAreaView根本无法与MaterialTopTabNavigator一起使用

2 个答案: