Próbuję uczynić FlatList w reagują ojczystym, że będzie jak karuzela obrazu.

Chcę podać źródła obrazu w folderze aktywów i przekazać każde źródło elementów w renderitem, ale otrzymuję błąd niezdefiniowany nie jest obiektem.

Oto stan:

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'}
  ]);

A tutaj jest 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>
  )}
/>
4
Panagiotis Iliakopoulos 15 marzec 2020, 22:13

2 odpowiedzi

Najlepsza odpowiedź

Reaguj Native FlatList {X1}} Callback Uzyskaj parametr obiektu z 3 rekwizytami , item, index i separators:

{x0}}

renderItem({item, index, separators});

Nie musisz definiować kluczy w tablicy, tylko źródła zdjęć, a następnie użyj item i index w funkcji renderItem:

Zdefiniuj tylko tablicę ze źródłami:

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

I użyj item i index dla source i 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
        }}
      />
    )}
  />
);
5
Christos Lytras 18 kwiecień 2021, 10:05

Dzieje się tak, ponieważ próbujesz zniszczyć parametr images, który nie istnieje, nazywa się item.

Spróbuj tego zamiast tego:

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
                }}
            />
        )}
    />
);
2
emeraldsanto 15 marzec 2020, 19:35