Как динамически установить исходный источник изображения в плоском списке

Question

Я новичок, чтобы реагировать нативно, я пытаюсь заполнить плоский список изображениями.Все изображения хранятся внутри приложения.Я хочу установить источник изображения динамически в каждой итерации.Это то, что я пытался.Пожалуйста, помогите мне.

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={
    (item)=>{
     switch(item.TypeX){
     case '1':
     return require('path 1');
     case '2':
     return require('path 2')
   }
}} />
  }
</FlatList>

Answer 1

Вы также можете использовать библиотеку https://www.npmjs.com/package/react-native-placeholderimage. Эта библиотека помогает размещать заполнители до тех пор, пока изображение не будет загружено из Интернета или API.

renderItem={({item}) =>
    <PlaceHolderImage
    source={!!data.imageurl ? { uri: imgURL } : AppImages.placeHolderImage.source}
    style={iconStyle}
    placeHolderURI={AppImages.placeholderImage.source}
                    />
}

Answer 2

Я думаю, что помещать переключатель в опору источника изображения не очень хорошая идея.Также не уверен, будет ли это работать или нет.Но вы можете сделать одну вещь: когда вы получаете данные из API, которые вы заполняете в своем массиве listData, вы можете добавить URL / путь к вашим изображениям сразу после получения данных из API, например, в ответ вы получаете массив объектов:

res=[ { data1:'', data2:''..   },{ data1:'', data2:''.. },{ data1:'', data2:''.. },{ 
   data1:'', data2:''.. }];

, чтобы вы могли выполнить итерацию этого массива и добавить изображения следующим образом:

res.map((obj, i) => { 
   let path = imagepPathArray[i]; 
   return {...obj, imagePath: path  
   }
})

и получить доступ к пути к изображению в FlatList следующим образом:

renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.imagePath}}
}}

PS: сначала сохраняйте пути к изображениям в отдельном массиве.

Answer 3

Я нашел решение, мы можем создать простую функцию, как показано ниже, в нашем компоненте

getFanSpeedImage(speed) {
        switch (speed) {
            case '1':
                return (<Image style={styles.statusButton} source={require('1.png')} />);
            case '2':
                return (<Image style={styles.statusButton} source={require('2.png')} />);
            case '3':
                return (<Image style={styles.statusButton} source={require('3.png')} />);
        }

    }

, после этого мы можем вызвать его в нашей главной функции рендеринга, как показано ниже

render(){
   return(

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
    {this.getFanSpeedImage(item.typeX)}
  }
</FlatList>

);

}

Answer 4

Вы должны иметь изображения в данных .. в вашем случае в listDate

state = {
  listData: [
  {...,image:require('1.png')},
  {...,image:require('2.png')}
  ...
 ]
}

Тогда в вашей функции рендеринга

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={item.image}
}} />
  }
</FlatList>

Если у вас есть изображения, сохраненные в удаленном URL, товаше состояние должно выглядеть как

state = {
      listData: [
      {...,image: 'https://somedomain.com/imagename.png'},
      {...,image: 'https://somedomain.com/imagename2.png'}
      ...
     ]
    }

, и в вашей функции рендеринга вы должны использовать следующий код

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.image}}
}} />
  }
</FlatList>

Если вы выбираете запись из API, вы помещаете запрос в componentDidMount реакцииобратный вызов и установка данных с использованием setState function