React Native Expo本地图片无法加载问题求助

核心错误：Image组件属性使用错误 #

React Native 的 <Image> 组件加载本地图片时，必须使用 source 属性，而非 href（href 是Web端HTML标签属性，不适用于React Native组件）。

修正后的完整代码 #

JSX部分：

import React from 'react';
import { View, Image, Dimensions, StyleSheet } from 'react-native';

export default function App({ navigation }) {
  const { height, width } = Dimensions.get('window');
  // 移除无意义的冗余代码：const entry = ({navigation})

  return (  
    <View style={styles.container}>
      <Image 
        source={require('./assets/bg_login.jpg')} // 替换href为source
        style={styles.image}
      />
    </View>
  );
}

样式部分：

确保样式通过 StyleSheet.create 定义（React Native标准写法）：

const styles = StyleSheet.create({
  container: {
    flex: 1, // 确保View占满屏幕，避免Image被挤压
  },
  image: {
    width: 100,
    height: 100,
    // 可选：添加背景色便于观察组件是否渲染
    // backgroundColor: '#ccc'
  },
});

额外检查点 #

• 确认图片路径准确：./assets/bg_login.jpg 相对于当前组件文件的位置是否正确，文件名大小写是否匹配（iOS区分大小写，Android不区分）。
• 重启Expo开发服务器：若资源识别异常，重启后可触发Expo重新扫描本地资源。
• 优先使用固定数值或动态尺寸：避免直接用百分比宽高（除非配合父容器flex布局），可基于Dimensions设置适配值，比如：

  image: {
    width: width * 0.5, // 占屏幕宽度的50%
    height: width * 0.5,
  }
  

内容的提问来源于stack exchange，提问作者Junaid Ahmed