[英]React Native Dynamic Images
我正在閱讀一個 JSON 文件,其中包含某些人的姓名和圖像 URI。 在迭代結構時,我可以打印名稱但無法顯示圖像。 我還讀到 React 不支持動態圖像,所以我按照這里的建議做了一個解決方法。
[
{
"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>
)
}
}
根據您期望的圖像數量,您可以嘗試在assets/images
文件夾中放置一個images.js
文件並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>
);
})}
如果你正在處理大量的圖片,那么你的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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.