Не могу показать изображения в реагировать на родной плоский список Android - PullRequest
Новая
       56

Не могу показать изображения в реагировать на родной плоский список Android

0 голосов
/ 14 сентября 2018

Я хочу построить плоский список, содержащий изображения и текст.Текст показывает хорошо, но изображения нет, даже местные изображения.Когда я впервые использовал 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>
>         )
> 
>     }
> 
> }

Когда на экране появляются изображения, они не отображаются.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

В вашем компоненте ItemShow есть небольшая ошибка!у вас есть: 

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

пожалуйста, измените его на: 

<Image source={{uri: this.props.i.IMAGE.uri}} ...
0 голосов
/ 14 сентября 2018

Вы уже передали 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'

, это поможет вам, пожалуйста, попробуйте ..

...