React native 错误：TransformError Invaild调用第行：require（图像）

我想通过阅读JSON在屏幕上显示一些图片。 以下是我的JSON代码：

{
  "data": [
    {
      "id": 1,
      "title": "First",
      "imgPath": "./src/assets/images/1.png"
    },
    {
      "id": 2,
      "title": "Second",
      "imgPath": "./src/assets/images/2.png"
    },
    {
      "id": 3,
      "title": "Third",
      "imgPath": "./src/assets/images/3.png"
    }
  ]
}

项目树

这是我的密码：

var Images = require('ImageData');

class MainView extends Component {

    render() {
        return (
            <View style={MainViewStyles.mainBoxStyle}>
                <Text style={{fontSize: 50}}>MainView</Text>
                //call the method
                {this._renderImages()}
            </View>
        );
    }


     //read the json file
    _renderImages(){
        let renderedImages = [];
        let images = Images.data;
        for (let i=0;i<images.length;i++){
            let image = images[i];
            renderedImages.push(
                <Image source={require(image)} />
            );
        }
        return renderedImages;
    }

}

以上是我的项目配置信息

---

如何才能成功读取JSON文件，并将图片成功显示在屏幕上？首先，您的所有图像都是静态的，并且位于本地项目中。它不是来自任何API服务。假设您想在本地访问图像，您可以这样做

import img1 from '../images/1.jpg';

你可以这样访问它

<Image source={img1} />

假设#2

一切都很完美，它来自API，然后你需要做的很简单

     //read the json file
_renderImages(){
    let renderedImages = [];
    let images = Images.data;
    for (let i=0;i<images.length;i++){
        let image = images[i];
        renderedImages.push(
            <Image source={i.imgPath} />
        );
    }
    return renderedImages;
}

//读取json文件
_渲染（）{
让renderImages=[]；
让images=images.data；
对于（设i=0；i你可以这样做


var-imagePath=arr[6]；
常量测试=需要（图像路径）；
return（）
发生了什么错误？好像是软件包问题，我再次上传了运行错误图片。
     //read the json file
_renderImages(){
    let renderedImages = [];
    let images = Images.data;
    for (let i=0;i<images.length;i++){
        let image = images[i];
        renderedImages.push(
            <Image source={i.imgPath} />
        );
    }
    return renderedImages;
}