反应本地动态图像

Question

我正在读取一个JSON文件，其中包含某些人的名称和图像URI。在结构上进行迭代时，我可以打印名称，但无法显示图像。我还读到React不支持动态图像，所以我按照建议的here进行了解决。

JSON

rdd.map(lambda x: x.split('::')).map(lambda x: "::".join([x[0]] + ['0' if(x[1] == 'F') else '1'] +x[2:]))

主要组件

mysql> SET PASSWORD = PASSWORD('your_new_password');

Answer 1

根据您期望的图像数量，您可以尝试将images.js文件放在assets/images文件夹中，并require这样放置：

// assets/images/images.js
const images = {
 rohit: require("./rohit.png"),
 bhavya: require("./bhayva.png")
}
export default images;

然后在MainComponent中，如果要修剪uri中字符串的 assets：/ 部分，则可以使用：

 import images from "../assets/images"

                  {initialArr.map((prop, key) => {
                    return (
                        <View style={styles.container}>
                      <Image source={images[prop.uri]} style={styles.image}></Image>
                      <Text key={key}>{prop.uri}</Text>
                      </View>
                    );
                 })}
              </View>}

如果要处理大量图像，那么images.js文件将变得难以维护，在这种情况下，您可以尝试使用https://github.com/dushaobindoudou/babel-plugin-require-all之类的插件，然后编写一个小脚本将为您的图像创建字典，例如：

// prepareImages.js
const fs = require("fs");
const files = fs.readdirSync("./assets/images").filter(x => x.includes("png"));
const ex = "{\n" +
files.map(x => `"${x.split(".png")[0]}": require("./${x}"),`).join("\n") + "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/images/index.js", res);