React Native: URI отображается несколько раз в flatlist - PullRequest
Новая
       10

React Native: URI отображается несколько раз в flatlist

0 голосов
/ 05 декабря 2018

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

   ["https://hi.com//image.png",  //uri
    "hello",
    "https://hi.com//image2.png",
    "welcome",      
    "https://hi.com//image3.png",
    "great",      
      ../..
   ]

Проблема в том, что мое изображение появляется, но текст в правой части на самом деле мой uri stringyfied.

Я думаю, что-то не так с keyExtractor: 

renderItem =({item}) => {           
return(    
  <View style ={{flex:1, flexDirection:'row'}}>
    <Image source ={{uri: item}}/>
    <View style ={{flex:1, justifyContent: 'center'}}>
      <Text>{item}</Text>
    </View>
  </View>
  )
}

render() {  
return (
  <View style={styles.mainContainer}>
      <FlatList 
        data= {this.state.dataSource}              
        keyExtractor={(item,index) => index.toString()}
        renderItem= {this.renderItem}
        /> 
  </View>       
  );
}

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

ваш элемент рендеринга плоского списка пытается получить доступ к элементу в цикле. Поэтому каждый раз, когда он зацикливается, вы передаете элемент в Image, а элемент в Text.Как предложил @wijuwiju, это лучший способ реализовать it.try длясохранить ключи к вашим данным. Затем ваш плоский список будет отображаться правильно.

0 голосов
/ 05 декабря 2018

ваша функция renderItem проходит через каждый элемент массива, не зная, что это лучший вариант для ваших данных, возможно, вместо этого попробуйте использовать что-то подобное: 

    <Image source ={{uri: item.uri}}/>
    <Text>{item.text}</Text>

с другой стороны, если вам нужно сохранить плоский массив, возможно, напишите некоторую функцию с модулем деления индекса на 2 и оттуда получите то, что куда, но не знаете, зачем вам это нужночто, может быть, кроме вызова Codewars;) удачи, надеюсь, это поможет

...