我正在尝试通过Flatlist
渲染视频。我已经尝试过ViewPager
,但是ViewPager具有有限的功能,并且我不想再使用它,我想改用FlatList,但是问题是我不能像ViewPager
那样滚动Flatlist ,默认情况下它一次只能显示一个视频,并且滚动非常流畅,快速,而没有因此,在您需要帮助的情况下,我想实现在FlatList整个屏幕上一次滚动和渲染一项的相同功能。谢谢
这是我的ViewPager代码。
<ViewPager
orientation="vertical"
initialPage={0}
style={{flex: 1, backgroundColor: 'black'}}
onPageSelected={(e) => {
console.log(e);
this.handlePause(e.nativeEvent.position);
}}>
{this.state.videos.map((item, i) => {
return (
<DoubleTap
key={i}
style={{flex: 1}}
doubleTap={() => {
this.toggleLike(item.challenge_id);
}}
delay={200}>
<TouchableWithoutFeedback
style={{flex: 1}}
onPress={() => {
this.handlePlayPause(item.challenge_id);
}}>
<Video
ref={(ref) => {
this.video = ref;
}}
poster={`${BASE_URL}${item.thumbnail}`}
resizeMode="cover"
source={{
uri: item.file,
}}
style={styles.mediaPlayer}
volume={0.4}
paused={item.paused}
onReadyForDisplay={() => {
this.handleVideoLoading(item.challenge_id);
}}
posterResizeMode={'cover'}
/>
</TouchableWithoutFeedback>
</DoubleTap>
);
})}
</ViewPager>
这是我的FlatList renderItem
renderVid = ({item, index}) => {
return (
<Video
key={index}
paused={item.paused}
source={{
uri: item.vid,
}}
style={{
height: '100%',
backgroundColor: '#2f2f2f',
}}
volume={0.4}
posterResizeMode={'cover'}
/>
);
};