反应原生动态图像 [英] React Native Dynamic Images

问题描述

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

JSON

<预><代码>[{身份证":1，"name": "罗希特","uri": "资产:/rohit.jpg",特殊":文本1"},{身份证":2，"name": "安莫尔","uri": "资产:/rohit.jpg",特别":text2"},{身份证":3，"name": "Bhavya","uri": "资产:/rohit.jpg",特别":text3"}];

主要组件

import React, {Component} from 'react';import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput, AsyncStorage} from 'react-native';import { createStackNavigator } from 'react-navigation';从 './customData.json' 导入 customData1；class HomeScreen 扩展了 React.Component {使成为() {const initialArr = customData1;返回 (<视图样式={styles.container}><ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}><Text style={styles.category}>Category 1</Text><ScrollView horizo​​ntal={true} showsHorizo​​ntalScrollIndicator={false}><TouchableWithoutFeedback onPress={() =>{this.props.navigation.navigate('详细信息', {});}}><视图样式={styles.view}>{initialArr.map((prop, key) => {返回 (<视图样式={styles.container}><图片来源={{uri: {prop.uri}}} style={styles.image}></Image><Text key={key}>{prop.uri}</Text></查看>);})}</查看></TouchableWithoutFeedback></ScrollView></ScrollView></查看>)}}

解决方案

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

//assets/images/images.js常量图像 = {rohit: 需要("./rohit.png"),bhavya:需要(./bhayva.png")}导出默认图像；

然后在您的 MainComponent 中，如果您要修剪掉 uri 中字符串的 assets:/ 部分，那么您可以使用:

从../assets/images"导入图片{initialArr.map((prop, key) => {返回 (<视图样式={styles.container}><图片来源={images[prop.uri]} style={styles.image}></Image><Text key={key}>{prop.uri}</Text></查看>);})}

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

//prepareImages.jsconst 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 = "导出默认值" + ex;fs.writeFileSync("./assets/images/index.js", res);

I'm reading a JSON file which has the names and the image URI of certain people. While iterating over the structure I'm able to print the names but can't get the Images to show up. I've also read that React doesn't support dynamic images so I did a workaround as suggested 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"
  }
];

Main Component

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

解决方案

Depending on the number of images that you are expecting you could try placing an images.js file in your assets/images folder and require them as such:

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

Then in your MainComponent, if you were to trim off the assets:/ part of the string in the uri then you could use:

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

If you are dealing with a large number of images, then your images.js file will become difficult to maintain, in that case you could try using a plugin like https://github.com/dushaobindoudou/babel-plugin-require-all and then write a small script which will create an dictionary of your images like:

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

这篇关于反应原生动态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！