Question

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

现在我面临着无法写的问题：

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

if语句的另一个解决方案不起作用，因为我有很多选择，任何想法？

非常感谢

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 "}"

具有大量图像的React-native动态图像

2 个答案: