IT技术 - react-native动态图像 - 吾爱随笔录

react-native动态图像

IT技术 reactjs react-native

2021-04-13 04:28:57

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

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

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

其它你可能感兴趣的问题

上一篇如何正确检测 React JS 中的重新渲染？下一篇如何只填充SVG的一部分？