Question

在iPhone X模拟器上运行该应用程序时，“材质顶部选项卡导航器”会切入缺口和底部按钮。

为解决此问题，我尝试在应用应用容器之前实现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中包装导航器

2 个答案: