Flatlist Источник изображения в React Native

Question

Я пытаюсь отобразить FlatList в React Native, чтобы он был похож на карусель изображений.

Я хочу указать источники изображений в папке ресурсов и передать каждый источник элементов в renderItem, но я получаю ошибку undefined не является объектом.

Вот состояние:

export default function App() {
  const [images, setimages] = useState([
    {src:require('./assets/image1.png'),key:'1'},
    {src:require('./assets/image2.png'),key:'2'},
    {src:require('./assets/image3.png'),key:'3'},
    {src:require('./assets/image4.png'),key:'4'},
    {src:require('./assets/image5.png'),key:'5'}
  ]);

А вот это FlatList:

<FlatList
  horizontal={true} 
  showsHorizontalScrollIndicator={false} 
  data={images}
  renderItem={ ({images}) => (
    <Image source={images.src} style={{
      width:260,
      height:300,
      borderWidth:2,
      borderColor:'#d35647',
      resizeMode:'contain',
      margin:8
    }}></Image>
  )}
/>

Answer 1

React Native FlatList renderItem обратный вызов получить параметр объекта с 3 реквизитами, item, index и separators:

renderItem

renderItem({item, index, separators});

Вам не нужно определять ключи в вашем массиве, только источники изображений, а затем использовать item и index внутри вашей renderItem функции:

Определите только массив с источниками:

const [images, setimages] = useState([
  require('./assets/image1.png'),
  require('./assets/image2.png'),
  require('./assets/image3.png'),
  require('./assets/image4.png'),
  require('./assets/image5.png')
]);

И используйте item и index для source и key:

return (
  <FlatList
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    data={images}
    renderItem={ ({ item, index }) => (
      <Image source={item} // Use item to set the image source
        key={index} // Important to set a key for list items
        style={{
          width:260,
          height:300,
          borderWidth:2,
          borderColor:'#d35647',
          resizeMode:'contain',
          margin:8
        }}
      />
    )}
  />
);

Answer 2

Это происходит потому, что вы пытаетесь уничтожить параметр images, который не существует, он называется item.

Попробуйте вместо этого:

return (
    <FlatList 
        horizontal
        showsHorizontalScrollIndicator={false}
        data={images}
        renderItem={({ item }) => (
            <Image 
                source={item.src}
                style={{
                    width:260,
                    height:300,
                    borderWidth:2,
                    borderColor:'#d35647',
                    resizeMode:'contain',
                    margin:8
                }}
            />
        )}
    />
);