无法在反应本机平面列表android中显示图像答案

【问题标题】：Cant show Images in react native flat list android无法在反应本机平面列表android中显示图像
【发布时间】：2018-09-14 08:57:33
【问题描述】：

我想建立一个包含图像和文本的平面列表。文字显示得很好，但图像却不是，甚至是本地图像。当我第一次使用 ScrollView 时，所有元素都完美显示。我正在使用 Windows 10 和 Android 模拟器。这是我的代码：

> import React, {Component} from 'react';
> import {FlatList, Image, StyleSheet,Text, View} from "react-native";
> 
> export default class Articles extends Component {
>     constructor(props) {
>         super(props);
>         this.state = {
>             FlatListItems: [
>                 {
>                     TheKey: 'موسیقی',
>                     MATN: 'این ها هر کدام یک هنر هستند',
>                     IMAGE: {uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
>                 },
>                 {
>                     TheKey: 'نقاشی',
>                     MATN: 'این ها هر کدام یک هنر هستند',
>                     IMAGE: {uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
>                 },
>                 {
>                     TheKey: 'شعر',
>                     MATN: 'این ها هر کدام یک هنر هستند',
>                     IMAGE: {uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
>                 },
>                 {
>                     TheKey: 'رقص',
>                     MATN: 'این ها هر کدام یک هنر هستند',
>                     IMAGE: {uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
>                 }
>             ]
>         }
>     }
> 
>     _renderItem(item) {
>         return (
>             <ItemShow i={item.item}/>
>         )
> 
>     }
> 
>     render() {
>         return (
>             <View>
>                 {/*<Image source={{uri:'http://www.balout.ir/sitefiles/offices_logo.png'}}
> style={styles.image}/>*/}
> 
>                 <FlatList
>                     data={this.state.FlatListItems}
>                     renderItem={({item}) => this._renderItem({item})}
>                     keyExtractor={(item, index) => index.toString()}
>                 />
>             </View>
> 
> 
>         )
> 
> 
>     } }
> 
> 
> class ItemShow extends Component {
>     constructor(props) {
>         super(props);
> 
> 
>     }
> 
>     render() {
> 
>         return (
>             <View style={{flex: 1, flexDirection: 'row'}}>
> 
>                 <Image source={{uri: this.props.IMAGE}} style={styles.image}></Image>
>                 <View style={{flex: 1, flexDirection: 'column'}}>
>                     <Text style={styles.basListText}> {this.props.i.TheKey} </Text>
>                     <Text style={styles.listMatn}> {this.props.i.MATN} </Text>
>                 </View>
> 
>             </View>
>         )
> 
>     }
> 
> }

当我在屏幕上显示图像时，图像不会被渲染。

【问题讨论】：

标签： react-native-android react-native-flatlist

【解决方案1】：

您已经在源路径中传递了 uri，在数组中您将图像添加为 IMAGE: {uri: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'} 但你应该只通过

IMAGE: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'

对你有帮助，请尝试一下..

【讨论】：

图片底部显示，但有地方是白色的
你声明了那个视图的高度和宽度吗？
并添加一个背景颜色，以便识别创建的图像视图
使用这一行 > google.com/images/branding/googlelogo/1x/…'}} style={styles.image}> 让我知道它是否给出了结果
我已经给了它那个代码，但它仍然显示背景颜色

【解决方案2】：

您的 ItemShow 组件中有一个小错误！你有：

<Image source={{uri: this.props.IMAGE}} ...

请改成：

<Image source={{uri: this.props.i.IMAGE.uri}} ...

【讨论】：