探索React Native Video:一款强大的视频组件库
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
const VideoPlayer = ({ videoSource, isPlaying, onPressPlayPause }) => {
const videoRef = useRef(null);
useEffect(() => {
if (isPlaying) {
videoRef.current.presentFullscreenPlayer();
}
}, [isPlaying]);
return (
<View style={styles.container}>
<Video
ref={videoRef}
source={videoSource}
style={styles.video}
paused={!isPlaying}
resizeMode="contain"
controls
/>
<TouchableOpacity onPress={onPressPlayPause}>
<Text style={styles.playPauseText}>
{isPlaying ? '暂停播放' : '播放'}
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: 300,
marginBottom: 10,
},
playPauseText: {
fontSize: 18,
color: 'blue',
}
});
export default VideoPlayer;
这个代码示例展示了如何使用React Native Video库来创建一个简单的视频播放器组件。它使用了Hooks API来管理组件的状态,并且提供了播放和暂停视频的功能。这个示例可以作为开发者学习和实践如何在React Native应用中集成和使用React Native Video库的起点。
评论已关闭