Expo开发React应用时backgroundImage网页正常显示手机端不显示

React Native 原生运行环境（安卓/iOS App端）的核心View组件不支持Web标准CSS的backgroundImage属性。

• Web端能正常展示背景图，是项目依赖的react-native-web适配层做了Web侧的CSS规则兼容，把该CSS样式转成了Web DOM可识别的效果
• Expo预览的原生App环境中，这套CSS写法不会被原生渲染层识别，无论传入远程图片URL还是本地require引入的资源，都无法触发图片渲染，因此会出现白屏。你之前尝试本地资源引入未生效，本质也是因为依然使用了原生端不支持的CSS backgroundImage写法，和资源本身是远程/本地无关。

使用React Native/Expo官方跨端兼容的ImageBackground组件实现背景图效果，该组件在Web、安卓、iOS端均有统一的渲染实现，可替代CSS的backgroundImage能力。

1. 首先从react-native包中导入ImageBackground组件
2. 将原来设置了backgroundImage样式的View替换为ImageBackground，通过组件的source属性传入图片资源，通过resizeMode属性配置图片填充模式（对应原CSS的backgroundSize: cover效果）
3. 需要浮在背景图上的内容，直接作为ImageBackground的子组件传入即可

修正后的核心实现代码如下：

// 顶部导入依赖
import { ScrollView, View, Text, ImageBackground } from 'react-native';
// 项目原有其他依赖（TableView、Section、Cell等）保持原有导入逻辑不变

const data = [
  { 
    title: "Joe's Gelato",
    tagline: "Dessert, Ice cream, £££",
    eta: "10-30",
    imgUri: "https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800"
  }
];

function HomeScreen({ navigation }) {
  const HomescreenCell = (props) => (
    <Cell
      {...props}
      onPress={() => navigation.navigate('Menu')}
      cellContentView={
        // 替换原带backgroundImage样式的View为ImageBackground
        <ImageBackground
          source={{ uri: props.imgUri }}
          style={{ flex: 1 }}
          resizeMode="cover"
        >
          <View>
            <Text style={{
              fontWeight: "bold",
              fontFamily: "Trebuchet MS",
              color: "#FFC613"
            }}>
            {props.title}
            </Text>
            <Text style={{
              fontFamily: "Noto Sans",
              color: "#FFF2D8"
            }}>
            {props.tagline}
            </Text>
          </View>
        </ImageBackground>
      }
    />
  )
  return (
    <ScrollView>
       <View>
         <TableView>
            <Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc">
              {data.map((item, index) =>
                  <HomescreenCell key = {item.title}
                    title= {item.title}
                    tagline= {item.tagline}
                    eta= {item.eta}
                    imgUri= {item.imgUri}
                  />
              )}
            </Section>
         </TableView>
       </View>
    </ScrollView>
  );
}

补充说明 #

• 传入远程图片时，source属性固定传{ uri: 图片地址 }格式，不需要写Web CSS的url()包裹语法
• 后续如果切换为本地图片资源，直接将source属性值改为require('本地图片相对路径')即可，其余逻辑无需调整
• ImageBackground需要设置明确的尺寸（比如示例中的flex:1或者固定宽高值），否则可能出现渲染异常

内容的提问来源于stack exchange，提问作者Magnus Tan