React Native Flex：1不能填满整个屏幕

Question

我尝试使用flex: 1用黑色填充整个屏幕。但结果是这样的

  <View
    style={{
      flex: 1,
      backgroundColor: 'black',
    }}
  />

我也尝试使用：

   height: '100%',
   width: '100%',

和

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

但结果仍然相同。

有没有办法完全填满整个屏幕？

Answer 1

您可以使用Dimensions.get（'window'）来获取屏幕的完整高度和宽度。

声明一个常量

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

然后使用此内部样式
style = {{
            height = HEIGHT,
            width = WIDTH,
            backgroundColor = 'black',
        }} 

Answer 2

您是否将应用程序包装在安全区域视图内，如果flex：1不起作用，您仍然可以使用百分比宽度和高度来填充整个屏幕。

style = {{ width:'100%', height:'100%' }}

Answer 3

如果给定父视图的填充，请删除它。可能可以正常工作，并且您的渲染功能应该像这样。

render() {
  return (
   <View style={{ flex: 1, backgroundColor: 'black'}} />
  )
}

Answer 4

首次导入：

import { StatusBar } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

将布局更改为：
<StatusBar backgroundColor="black" barStyle="white-content"/>
<SafeAreaView 
    style={{
        flex: 1,
        backgroundColor: 'black',
    }}
>
      <View>...</View>
</SafeAreaView>