视图不是全屏 React-Native

Question

我最近开始使用 React-Native，只是尝试一些简单的屏幕，但是当我的应用程序显示在我的设备上时我遇到了一个问题（在 'Redmi 5 Plus - 7.1 上安装 APK'app-debug.apk' .2') 用户界面在状态栏和内容之间的中心有奇怪的黑色。

请看图片： App has strange black in center between status bar and content

import React, { Component } from 'react';
import {
  View, StyleSheet, StatusBar, Text
} from 'react-native';
import Main from './src/components/Main';


type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.baseText}>
          <Text style={styles.titleText} onPress={this.onPressTitle}>
            {this.state.titleText}{'\n'}{'\n'}
          </Text>
          <Text numberOfLines={5}>
            {this.state.bodyText}
          </Text>
        </Text>
        {/* <Main /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

我尝试隐藏状态栏，但奇怪的“黑色标题”仍然存在。 结果：Hiding StatusBar

`<View style={styles.container}>
  <StatusBar
  hidden={true}
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Text style={styles.baseText}>
    <Text style={styles.titleText} onPress={this.onPressTitle}>
      {this.state.titleText}{'\n'}{'\n'}
    </Text>
    <Text numberOfLines={5}>
      {this.state.bodyText}
    </Text>
  </Text>
  {/* <Main /> */}
</View>`

Answer 1

问题是我的安卓手机屏幕是特殊比例的（小米红米5 plus），然后我需要去设置区给我的应用全屏权限，它就可以工作了。希望这可以帮助其他人。