具有大量图像的反应原生动态图像

Question

我有150个按钮的数组链接到150个图片，我需要按下按钮后显示图片。这些按钮的信息存储在JSON文件中。这些照片的名字是按钮的ID的，所以1.JPG，2.JPG等

现在我面对的，我不能写的问题：

fish["image"] = {uri: "asset-library://" + fish.id + ".jpg"}; 

而且随着如果其他解决方案声明不起作用，因为我有这么多的选择，任何想法？

非常感谢

Answer 1

我有一个类似的问题。我构建了一个包含巨大switch语句的函数，并且对每种情况都有静态需求。现在

function getImage(id) { 
    switch(id) { 
     case 1: 
      return require('./img/1.jpg'); 
     case 2: 
      return require('./img/2.jpg'); 
     ... 
    } 
} 

你可以做

fish["image"] = getImage(fish.id); 

我也不得不使用超过100个图标，所以不是手写的情况下，我建立了自动生成功能的脚本。

Answer 2

我对于我开发的组件也有这个问题。我在json文件中使用了base64图像。但也许它不适合你，我希望它能帮上忙。

<Image 
    style={styles.imgStyle} 
    source={{uri: CountryFlags[country.cca2]}} 
/> 

你可以在这里看到：https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/index.js#L137-L139

如果你有关于它的文件夹，只要将影像转换这样的：

#!/bin/sh 

list=`ls ./flags | grep '[A-Z]'` 

echo "{" 
for item in $list 
do 
    header="data:image/png;base64," 
    img64=`ls ./flags/$item | xargs cat | base64` 
    echo ${item:0:2} :\'$header$img64\', 
done 
echo "}"