javascript - 如何使用 flatlist 集成 react-native-swiper
问题描述
我试图集成 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
/>
推荐阅读
- javascript - 如何在反应中创建一个单独的函数来获取数据并在每次需要时调用
- java - 无法从适配器调用活动功能
- r - 有没有办法永久删除 R 数据框中的行?
- node.js - 在 react 中从 cloudant 中获取数据
- php - 在集合中使用 groupBy 时 laravel 更改对象
- node.js - npm:启动脚本失败
- python - 要通过 lambda 排序的列表
- angular - 反应形式的对象成员的角度验证器
- xaml - 如何在 Silverlight 中将“ListView”添加到 Visual Studio 工具箱?
- javascript - 处理相同代码必须立即运行或在承诺解决后运行的最佳方法