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>
)}
/>
2 odpowiedzi
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
}}
/>
)}
/>
);
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
}}
/>
)}
/>
);
Podobne pytania
Nowe pytania
react-native
React native to biblioteka JavaScript używana do tworzenia natywnych aplikacji mobilnych przy użyciu React. React Native skupia się na wydajności programistów na wszystkich platformach, na których Ci zależy - ucz się raz, pisz gdziekolwiek.