我正在阅读一个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>
)
}
}