如何在安全区域获得材料选项卡

【问题标题】：How do I get material tabs in the safe area如何在安全区域获得材料选项卡
【发布时间】：2019-01-25 10:05:28
【问题描述】：

我正在组合一个 react-native 应用程序，并希望顶部有标签。我使用createMaterialTopTabNavigator 作为标签，这很好用。但是，当我在最新的 iPhone 模拟器上运行该应用程序时，标签会渗入传感器栏。在尝试解决这个问题时，人们建议使用safeareaview，但似乎没有任何关于如何将其与外部选项卡父级结合的信息。

如果你们能提供任何帮助，我将不胜感激。谢谢

【问题讨论】：

标签： react-native react-navigation react-native-navigation

【解决方案1】：

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

const SafeAreaMaterialTopTabBar = ({ ...props }) => (
  <SafeAreaView>
    <MaterialTopTabBar {...props} />
  </SafeAreaView>
);

const options = {
  tabBarComponent: props => (<SafeAreaMaterialTopTabBar {...props} />),
};

const RentalsTopTabNavigator = createMaterialTopTabNavigator({
  [Routes.ROUTE_1]: {
    screen: Screen1,
    navigationOptions: {
      title: 'Tab1',
    },
  },
  [Routes.ROUTE_2]: {
    screen: Screen2,
    navigationOptions: {
      title: 'Tab 2',
    },
  },
}, options);

【讨论】：

需要注意的是createMaterialTopTabNavigator和MaterialTopTabBar现在应该从模块react-navigation-tabs导入