反应本地动态图像

Question

我正在读取一个JSON文件，其中包含某些人的名称和图像URI。在结构上进行迭代时，我可以打印名称，但无法显示图像。我也看到了那个阵营不支持动态图像，所以我做了一个解决办法的建议在这里。

JSON格式

[
  {
    "id": 1,
    "name": "Rohit",
    "uri": "assets:/rohit.jpg",
    "special": "text1"
  },
  {
    "id": 2,
    "name": "Anmol",
    "uri": "assets:/rohit.jpg",
    "special": "text2"
  },
  {
    "id": 3,
    "name": "Bhavya",
    "uri": "assets:/rohit.jpg",
    "special": "text3"
  }
];

主要成分

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput, AsyncStorage} from 'react-native';
import { createStackNavigator } from 'react-navigation';

import customData1 from './customData.json';

class HomeScreen extends React.Component {
    render() {
        const initialArr = customData1;
        return (
            <View style={styles.container}>
              <ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}>
              <Text style={styles.category}>Category 1</Text>


              <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                  <TouchableWithoutFeedback onPress={() => {
                        this.props.navigation.navigate('Details', {});
                  }}>
                  <View style={styles.view}>

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



              </ScrollView>
            </View>
        )
    }
}

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则可以使用：

 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);