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

【问题标题】：React Native Flex: 1 Does not fill whole screenReact Native Flex：1 不填满整个屏幕
【发布时间】：2020-06-15 10:42:23
【问题描述】：

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

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

我也尝试过使用：

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

和

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

但结果还是一样。

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

【问题讨论】：

这是因为您使用的是带有缺口的设备
您还想覆盖哪些区域？
@KaranMehta 我的安卓设备不使用缺口
@GauravRoy 注意屏幕顶部、右侧、底部和右侧仍有一些白色
然后上传安卓设备图片

标签： react-native flexbox

【解决方案1】：

首先将视图组件包装在 SafeAreaView 中，然后为其提供 flex 样式。

<SafeAreaView style={{flex: 1}}>
    <View style={/* do your styling */}>...</View>
</SafeAreaView>

【讨论】：

【解决方案2】：

我也遇到过类似的问题。但就我而言，我通过在 App.js（尤其是 return() 会话）和其他相关文件中将 View 修改为 SafeAreaView 解决了这个问题。

【讨论】：

【解决方案3】：

如果你使用反应导航试试这个

const ReactNavigation = require('react-navigation');
ReactNavigation.SafeAreaView.setStatusBarHeight(0);

或

navigationOptions: {
  headerForceInset: {top: 'never'},
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

如果您为父视图提供了填充，则将其删除。也许它可以工作，你的渲染功能应该是这样的。

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

【讨论】：

如您在上面看到的，我的代码中没有任何填充。
render() { return ( ); }
和你的完全一样

【解决方案6】：

您是否将应用包装在安全区域视图中，无论如何，如果 flex:1 不起作用，您可以使用百分比宽度和高度来填充整个屏幕。

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

【讨论】：

我试过你的建议，结果还是一样。如果我错了，请纠正我，保存区域视图是否仅适用于 IOS 11 或更高版本？

【解决方案7】：

您可以使用 Dimensions.get('window') 来获取屏幕的全高和全宽。

声明一个常量

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

然后使用这个内部样式

style = {{
            height = HEIGHT,
            width = WIDTH,
            backgroundColor = 'black',
        }}

【讨论】：

这个方法我试过了，结果是一样的