reactjs - react 原生动态图像

Question

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

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 ，如果您要修剪 Assets :/ 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>
  );
})}

如果您正在处理大量图像，那么您的 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);