我如何在安全区域获得 material 个选项卡

Question

我正在组装一个反应本机应用程序，并希望顶部有标签。我正在使用 createMaterialTopTabNavigator for the tabs and this works fine. However when I run the app on the newest iPhone simulator, the tabs bleed into the sensor bar. In trying to solve this, people suggest using the safeareaview，但它似乎没有关于如何将其与外部选项卡父级组合的任何信息。

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

Answer 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);