Javascript 反应本机图像绑定

尝试浏览一些React本机映像绑定，我不确定如何继续

现在，下面的代码起作用了

我有一个项目的数据文件：

MyData.js

import { Images } from '@configuration';

const myData = [
  {
    name: 'One',
    img: Images.one
  },
  {
    name: 'Two',
    img: Images.two
  },
  {
    name: 'Three',
    img: Images.three
  }
]

还有images.js文件

export const Images = {
  one: require('@assets/images/one.png'),
  two: require('@assets/images/two.png'),
  three: require('@assets/images/three.png')
}

在我的React屏幕中，我试图将其呈现为：

import {MyData} from '@data';

export default function MyScreen({navigation}) {
  const [myData] = useState(MyData);

  return (
    <View>
      <FlatList data={myData} keyExtractor={(item, index) => item.name}
                  renderItem={({item, index}) => (
        <Card image={item.img}>
        </Card>
       )}
      </>
    </View>
  )
}

当然，卡映像的绑定不起作用，因为img被解释为字符串

我尝试将图像绑定修改为：

<Card image={JSON.parse(item.img)}>
</Card>

但这只是抛出一个错误，图像不会渲染

在这个场景中如何处理图像是个难题

---

如有任何见解，将不胜感激。谢谢。

如果您可以对json进行一些调整，这是可能的

只需将图像名称保存在json数据中即可

  {
    name: "One",
    img: "one"
  },
  {
    name: "Two",
    img: "two"
  },
  {
    name: "Three",
    img: "three"
  }
]

当您想要渲染它时，可以使用

import { Images } from '@configuration';

<Card image={Images[item.img]}>
</Card>

从'@configuration'导入{Images}；
< /代码> 如果您的名称属性始终与实际图像源相同，那么我将考虑使用Name属性来提取如下的图像URL：

import { Images } from '@configuration';

<Card image={Images[item.name.toLowerCase()]}>
</Card>

从'@configuration'导入{Images}；
此图像是否始终有三个固定项，即一、二、三？有四张吗？我的意思是，我有很多照片。为了简洁，我把东西缩短了。图像并非都是数字。我得到的这个代码
{images[item.img]}
的值为空。我不确定为什么，因为images.js文件中的item.img有相应的值。我错过什么了吗？我也申报了进口货物。我还对json数据进行了调整，找到了答案。我所拥有的数据未提交到数据库中。现在工作。谢谢
import { Images } from '@configuration';

<Card image={Images[item.name.toLowerCase()]}>
</Card>