无法在 SafeAreaView 中包装导航器

Question

当运行 iPhone X 模拟器上的应用程序时，Material 顶部选项卡导航器切入槽口和底部按钮。

为了解决这个问题，我尝试在应用 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>

无法在 SafeAreaView 中包装导航器

Can't Wrap Navigator in SafeAreaView

react-native

react-navigation

safeareaview