[英]How to Integrate react-native-swiper using flatlist
我正在嘗試集成react-native-swiper,將視頻加載到其中。 我正在尋找一種將其與平面清單集成的方法。 但是數據無法正確加載,是否有其他方法可以使用平面列表(使用array.map())加載數據
export default class HomeTab extends Component {
render() {
return (
<FlatList
data={Data}
keyExtractor={(item, index) => item.id}
renderItem={({item}) =>
<Swiper style={styles.wrapper}
showsButtons={false}
horizontal={true}
loop={false}
index={item.id}
activeDot={
<View></View>
}
dot={
<View></View>
}
>
<View style={styles.slide1}>
<Video
source={{uri: item.media}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}}
resizeMode={'contain'}
style={styles.backgroundVideo}
/>
</View>
</Swiper>
}
/>
)
}
}
使用npm軟件包:react-native-swiper https://www.npmjs.com/package/react-native-swiper
嘗試使用此庫,導致react-native-swiper- flatlist在下面的示例中包含flatlist:
<SwiperFlatList
autoplay
autoplayDelay={3}
index={3}
autoplayLoop
data={items}
renderItem={({item}) => // Standard Image
<View style={[styles.child, { backgroundColor: '#000' }]}>
<Image
source={{uri:item.key}}
style={styles.checkoutSliderImage}
/>
<Text>{item.key}</Text>
</View>
}
showPagination
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.