Question

我最近开始使用React-Native，只是尝试一些简单的屏幕，但当我的设备上显示我的应用时遇到问题（安装APK＆＃39; app-debug.apk＆＃39; on＆＃39; Redmi 5 Plus - 7.1.2＆＃39;）UI在状态栏和内容之间的中心有奇怪的黑色。

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

＆＃13;

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',
  },
});

＆＃13;

我试图隐藏状态栏，但是奇怪的＆＃34; Black Header＆＃34;还在那儿。结果：Hiding StatusBar

＆＃13;

`<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>`

＆＃13;

Answer 1

问题是我的Android手机屏幕处于特殊比例（小米Redmi 5 plus），然后我需要转到设置区域并为我的应用授予“全屏”权限，此功能才可以正常使用。希望这可以帮助其他人。

视图不是全屏React-Native

1 个答案: