问题描述
我正在尝试制作类似 tik-tok 的视频应用。我不知道这是否是正确的方法,我实现了一个平面列表并制作了一个后期组件来呈现视频。但是每次我回到以前的帖子时,视频都卡住了。我必须多次单击它才能开始播放视频,然后它会从我离开的地方继续播放。如何在视口中自动播放上一篇文章,以及如何重置视频以从头开始播放?
const HomeScreen = () => {
const [post,setPost] = useState([]);
const [currentVisibleIndex,setCurrentVisibleIndex] = useState();
const route = useRoute();
const navigation = useNavigation();
useEffect(() => {
const fetchPost = async () => {
const results = await DataStore.query(Post);
setPost(results);
};
fetchPost();
},[]);
const onViewRef = useRef(({viewableItems,changed}) => {
console.log('Visible items are',viewableItems);
console.log('Changed in this iteration',changed);
setCurrentVisibleIndex(viewableItems);
});
const viewConfigRef = React.useRef({viewAreaCoveragePercentThreshold: 50});
return (
<View>
<FlatList
data={products}
viewabilityConfig={viewConfigRef.current}
onViewableItemsChanged={onViewRef.current}
renderItem={({item,index}) => <Post post={item} />}
showsverticalScrollIndicator={false}
snapToInterval={Dimensions.get('window').height - 70}
snapToAlignment={'start'}
decelerationRate={'fast'}
/>
</View>
);
};
export default HomeScreen;
const Post = props => {
const [post,setPost] = useState(props.post);
const [isLiked,setIsLiked] = useState(false);
const [videoUri,setVideoUri] = useState('');
const [paused,setPaused] = useState(false);
const navigation = useNavigation();
const onPlayPausePress = () => {
setPaused(!paused);
};
const getVideoUri = async () => {
setVideoUri(post.videoUri);
return;
};
useEffect(() => {
getVideoUri();
console.log('hello');
},[props.index]);
console.log('paused:',paused);
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={onPlayPausePress}>
<View>
<Video
source={{uri: videoUri}}
style={styles.video}
onError={e => console.log(e)}
resizeMode={'cover'}
repeat={true}
paused={paused}
autoplay={true}
/>
<View style={styles.uiContainer}>
{/* <View style={styles.iconContainer}>
<FontAwesome name={'commenting'} size={40} color="white" />
<Text style={styles.statsLabel}>{post.comments}</Text>
</View> */}
</View>
</View>
</TouchableWithoutFeedback>
</View>
);
};
export default Post;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)