React Native随机选图片报错：Invalid props source supplied to Image

这个问题我太熟悉了！你踩了React Native Image组件处理本地资源的一个常见坑，咱们一步步来修复：

错误原因分析 #

你用import导入了本地图片，但在Image组件里却用了{ uri: ... }的格式——这是加载网络图片/本地文件系统路径的写法，而通过import引入的本地资源已经是一个解析好的资源对象，不需要再套uri啦！另外你的代码里还漏了image1的导入，这也会导致数组里出现undefined，加重错误。

完整修复代码 #

import React, { Component } from 'react';
import { Image, StyleSheet } from 'react-native';
// 补全image1的导入！
import image1 from '../../../../assets/images/image1.png';
import image2 from '../../../../assets/images/image2.png';
import image3 from '../../../../assets/images/image3.png';
import image4 from '../../../../assets/images/image4.png';
import image6 from '../../../../assets/images/image6.png';

class RandomImageComponent extends Component {
  // 初始化state，给currentImageIndex一个默认值
  state = {
    currentImageIndex: 0
  };

  componentDidMount() {
    this.changeImage();
  }

  changeImage = () => {
    const randomNumber = Math.floor(Math.random() * images.length);
    this.setState({ currentImageIndex: randomNumber });
  };

  render() {
    const images = [image1, image2, image3, image4, image6];
    return (
      // 直接把导入的图片变量传给source，不用{uri: ...}
      <Image 
        source={images[this.state.currentImageIndex]} 
        style={styles.imageStyle} 
      />
    );
  }
}

const styles = StyleSheet.create({
  imageStyle: {
    // 记得加上样式，比如宽高，不然图片可能不显示
    width: 200,
    height: 200
  }
});

export default RandomImageComponent;

关键修改点 #

• 补全image1的导入：避免数组中出现undefined导致source无效
• 修改Image的source属性：直接传入导入的图片变量，去掉{ uri: ... }的包裹
• 初始化state：给currentImageIndex设置初始值，防止组件首次渲染时state为空

额外说明 #

如果以后需要加载网络图片，才需要用{ uri: 'https://example.com/image.png' }的格式；而本地资源（通过import或require()引入的），直接把变量/require结果传给source就可以啦。

内容的提问来源于stack exchange，提问作者vincent O