我已经使用一个列表列出了从API提取的4个视频,但是我希望它们一次滚动一个,因此添加了viewpager以将每个视频呈现为单独的页面,但是在添加viewpager时,我似乎没有检索前端的视频,但是它们出现在我的日志中。
带有viewpager的代码:
<ViewPager scrollEnabled={true} orientation={"vertical"} >
<FlatList
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<ScrollView scrollEventThrottle={1}>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</ViewPager>
请帮助我,让我知道为什么会这样吗?