React Native本地图片ImageBackground仅固定高度可显示问题咨询

问题核心原因 #

1. 父容器缺少明确高度约束 #

React Native中，flex: 1的生效前提是父容器本身已经有确定的尺寸或者已经设置flex属性来分配空间。你代码里的外层<View>没有设置任何样式，它的高度默认由内部子元素撑开，无法为子元素分配剩余空间，所以ImageBackground上的flex: 1不会生效。
而百分比高度的规则是：必须要父元素拥有非百分比的明确高度值，子元素的百分比高度才能基于父元素高度计算。你外层View的高度是动态的不确定值，所以height: '100%'也会失效，导致ImageBackground没有可用的渲染高度，无法显示。

2. ImageBackground的特性与普通Image不同 #

普通Image组件加载本地静态资源时，会默认读取图片本身的宽高作为默认渲染尺寸，因此就算不额外设置样式也能正常显示。但ImageBackground是封装了View和Image的复合组件，它的尺寸优先受父容器和自身样式约束，不会自动继承内部图片的原始尺寸，就算加载的是本地资源，也需要有明确的尺寸约束才能正常渲染。

你之前设置固定数值高度能生效的原因也很简单：直接给了ImageBackground明确的高度值，不需要依赖父容器的尺寸计算，所以直接能渲染出来。

正确解决方案 #

你不需要用Dimensions手动获取屏幕高度，只要给外层View加上flex: 1，让它占满全屏的可用空间，ImageBackground的flex: 1就会正常生效：

import React from 'react';
import { View, ImageBackground, StyleSheet, Text } from 'react-native';

export default function WelcomeScreen(props) {
  return (
    {/* 给外层View添加flex: 1 */}
    <View style={{flex: 1}}>
      <Text>Welcome</Text>
      <ImageBackground source={require('./background.jpg')} style={styles.background} />
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    // 可根据需求添加resizeMode调整图片适配方式
    resizeMode: 'cover'
  },
});

如果你不需要外层View占满全屏，也可以直接给外层View设置明确的固定高度，此时ImageBackground的height: '100%'也能正常生效。

内容的提问来源于stack exchange，提问作者Andrea D_