react-native - 无法在 SafeAreaView 中包裹导航器

Question

在 iPhone X 模拟器上运行应用程序时，Material Top Tab Navigator 会切入凹槽和底部按钮。

为了解决这个问题，我尝试在应用 App Container 之前实现 SafeAreaView，并将每个单独的屏幕包装在 SafeAreaViews 中。这可以使文本远离这些区域，而不是导航器。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator, SafeAreaView } from 'react-navigation';

class Calculator extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Calculator!</Text>
      </View>
    );
  }
}

class Camera extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Camera!</Text>
      </View>
    );
  }
}

class Solution extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Solution!</Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialTopTabNavigator(
  {
    Calculator,
    Camera,
    Solution
  },
  {
    tabBarPosition: 'bottom',
  }
);

const AppContainer = createAppContainer(TabNavigator);

class App extends Component {
  render() {
    return (
      <SafeAreaView>
        <AppContainer/>
      </SafeAreaView>
    );
  }
}

export default App;

运行此应用程序时，不存在任何错误。但是，没有任何渲染。我期望的是一个选项卡导航器呈现三个选项卡，这些选项卡不会在缺口或底部按钮下方剪切。

Answer 1

给SafeAreaView个尺寸

<SafeAreaView style={{ flex: 1 }}>
  <AppContainer/>
</SafeAreaView>

如果 AppContainer 仍然全屏传播，

改变import { SafeAreaView } from 'react-navigation'

至import { SafeAreaView } from 'react-native'

Answer 2

您需要为组件提供flex: 1样式SafeAreaView

<SafeAreaView style={{flex: 1}}>
{/* Component here */}
</SafeAreaView>