在 React Native 中显示来自 json 文件的图像

Question

我是本机反应的新手，并创建了一个应用程序，该应用程序从 json 获取信息并将其显示为文本和图像。

我已将信息存储在 mysql 数据库中，并且我正在使用 php 来获取此信息（如下所示）

 <?php include 'DBConfig.php'; $sql = "SELECT * FROM EventsTable"; $result = $con->query($sql); if($result->num_rows >0){ while($row[] = $result->fetch_assoc()) { $item = $row; $json = json_encode($item); } } else { echo "No Results Found!"; } echo $json; $con->close(); ?>

然后我从 react native 中的文件中获取信息并将其转换为 json。

然后我希望能够以文本形式显示信息并选择图像的文件路径。

这是我的代码。

 constructor(props) { super(props); this.state = { isLoading: true, //ImageHolder: '' } } componentDidMount(){ fetch('http://3b252dcf.ngrok.io/events.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, () => { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } render() { if (this.state.isLoading){ return ( <View style={{flex: 1, paddingTop: 20}}> <ActivityIndicator /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList style={{paddingTop: 30}} data={ this.state.dataSource } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={this._renderItem} /> </View> ); } _renderItem = ({item}) => { { return( <View style={styles.eventContainer}> <Image source={{url:item.eventImage}} style={{ width: 100, height: 100, paddingBottom: 10 }} /> <View> <Text style={styles.rowViewContainer}>{item.name}</Text> <Text style={styles.SermonByText}>{item.eventDate} - {item.eventTime}</Text> </View> </View> ); } }

这是json的格式。

 [{"id":"1","name":"Meeting","eventDate":"Tuesday","eventTime":"7:30pm","eventImage":"require('youth.png')"}}

为了播放图像，我添加了这一行。

 <Image source={{url:item.eventImage}} style={{ width: 100, height: 100, paddingBottom: 10 }} />

当我使用 Xcode 在我的 iso 模拟器上运行应用程序时，图像不显示，我收到以下警告。

我怎样才能让图像显示

Answer 1

试试这个： <Image source={require('path to file')} ...