Reactjs 材质顶部选项卡导航器与状态栏重叠。有办法解决吗？

如何使CreateMaterialOptabNavigator添加的组件脱离状态栏？这是我的密码：

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

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

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

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

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});

从“React”导入React；
从“react native”导入{Text，View}；
从“反应导航”导入{createMaterialTopTabNavigator}；
类Screen1扩展了React.Component{
render（）{
返回(
屏幕1！
);
}
}
类Screen2扩展了React.Component{
render（）{
返回(
屏幕2！
);
}
}
类Screen3扩展了React.Component{
render（）{
返回(
屏幕3！
);
}
}
导出默认createMaterialTopTabNavigator({
“屏幕1”：屏幕1，
“屏幕2”：屏幕2，
“屏幕3”：屏幕3，
});

---

这是我的第一个项目，我可能错过了一些重要的东西。欢迎使用任何指针。

只需将您的视图替换为SafeAreaView，它应该会有所帮助

import { Text, SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

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

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

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

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});

从'react native'导入{Text，SafeAreaView}；
从“反应导航”导入{createMaterialTopTabNavigator}；
类Screen1扩展了React.Component{
render（）{
返回(
屏幕1！
);
}
}
类Screen2扩展了React.Component{
render（）{
返回(
屏幕2！
);
}
}
类Screen3扩展了React.Component{
render（）{
返回(
屏幕3！
);
}
}
导出默认createMaterialTopTabNavigator({
“屏幕1”：屏幕1，
“屏幕2”：屏幕2，
“屏幕3”：屏幕3，
});

安装Expo常量以检索statusBarHeight道具

expo install expo-constants

现在设置材质顶部选项卡导航器的样式道具，并将其设为marginTop

import Constants from 'expo-constants'
const TopTab = createMaterialTopTabNavigator();
    const RequestNavigator = () => (
  <TopTab.Navigator style={{ marginTop: Constants.statusBarHeight }}>
    <TopTab.Screen name="Account" component={Account} />
    <TopTab.Screen name="Profile" component={Profile} />
    <TopTab.Screen name="Settings" component={Settings} />
  </TopTab.Navigator>
);

从“expo常量”导入常量
const TopTab=createMaterialTopTabNavigator（）；
const RequestNavigator=（）=>(
);

---

如果您没有使用expo，您可以使用来检索状态栏高度

已隐藏的道具如果您想删除状态栏@flix我想保留statusbarkeyword

headerMode react导航