如何在安全区域获得材料标签

Question

我正在组装一个 react-native 应用程序，并希望顶部有标签。我正在为选项卡使用createMaterialTopTabNavigator，这很好用。但是，当我在最新的 iPhone 模拟器上运行该应用程序时，标签会渗入传感器栏。在试图解决这个问题时，人们建议使用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);