我在使用expo-video的过程中，发现它的全屏功能很是差强人意，所以想自己二次封装一下
如果看过我之前的expo文章，应该可以轻松的读懂下面的代码
一、安装相关依赖
npx expo install expo-video expo-router expo-screen-orientation expo-navigation-bar react-native-safe-area-context
| 依赖包 | 功能描述 |
|---|---|
| expo-video | 一个视频播放器 |
| expo-router | 路由 |
| expo-screen-orientation | 控制屏幕方向 |
| expo-navigation-bar | Android设备的导航设置 |
| expo-device | 获取设备类型 |
| react-native-safe-area-context | 获取设备的安全区域尺寸 |
二、主要代码
import {Image, TouchableOpacity, View, Text, Platform, TouchableWithoutFeedback} from 'react-native';
import {useVideoPlayer, VideoView} from 'expo-video';
import {useSafeAreaFrame} from 'react-native-safe-area-context'
import {useEffect, useState} from "react";
import {setStatusBarHidden} from "expo-status-bar";
import * as NavigationBar from 'expo-navigation-bar'
import * as ScreenOrientation from "expo-screen-orientation";
import {useNavigation} from "expo-router";
import fullScreenExit from '@/icons/fullscreen-exit.png'
import fullScreenEnter from '@/icons/fullScreen-enter.png'
import play from '@/icons/play.png'
import pause from '@/icons/pause.png'
import {useEvent, useEventListener} from "expo";export default function MyVideo({videoSource}) {const navigation = useNavigation()// 当前屏幕或窗口的可视区域尺寸const {width, height} = useSafeAreaFrame()// 全屏状态管理const [isFullscreen, setIsFullscreen] = useState(false);// 是否显示自定义控件const [showCustomControls, setShowCustomControls] = useState(true);// 当前视频总时长const [duration, setDuration] = useState(0);// 当前视频已播时长const [position, setPosition] = useState(0)// 快进/后退时间（秒）const SEEK_TIME = 15;// 播放器状态，idle errorconst [status, setStatus] = useState('idle')const player = useVideoPlayer(videoSource, player => {player.loop = false;player.timeUpdateEventInterval = 1player.play()});// 控制自定义视频控制组件的显示或隐藏const handleVideoPress = () => {if ('play' === status) {setShowCustomControls(!showCustomControls);}};useEffect(() => {}, [isFullscreen])// 全屏切换const toFullscreen = async () => {if (isFullscreen) {await exitFullscreen()} else {await enterFullscreen()}}// 全屏const enterFullscreen = async () => {// 隐藏状态栏，使用淡入淡出效果setStatusBarHidden(true, 'fade');// 隐藏蒙版setShowCustomControls(false)// 隐藏页面路由的顶部导航栏navigation.setOptions({headerShow: false})// 在Android平台上隐藏导航栏Platform.OS === 'android' && (await NavigationBar.setVisibilityAsync('hidden'));// 全屏标志setIsFullscreen(true);// 锁定屏幕方向为横向await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);};// 退出全屏const exitFullscreen = async () => {setStatusBarHidden(false, 'fade')setShowCustomControls(false)navigation.setOptions({headerShow: true})Platform.OS === 'android' && (await NavigationBar.setVisibilityAsync('visible'))setIsFullscreen(false)await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)};// 后退const rewind = async () => {player.seekBy(-SEEK_TIME)};// 快进const fastForward = async () => {player.seekBy(SEEK_TIME)};// 视频播放或暂停const togglePlayPause = async () => {if (player.status !== 'readyToPlay') {return}if (player.playing) {player.pause()} else {player.play()}}// 更精确的点击处理const handleProgressBarPress = async (event) => {if (duration === 0) return;const {locationX} = event.nativeEvent;const progressPercentage = locationX / (width - 50);const targetPosition = progressPercentage * duration;await player.seekBy(targetPosition - position)}// 视频状态监听useEventListener(player, 'statusChange', ({oldStatus, status: newStatus}) => {setDuration(player.duration)if ('idle' === oldStatus) {// 初次加载时setStatus('idle')} else if ('error' === newStatus) {// 加载错误时setStatus('error')setShowCustomControls(true)} else {// 加载成功时setStatus('play')if ('idle' === status) {setShowCustomControls(false)}}})// 视频时间变化监听useEventListener(player, 'timeUpdate', (event) => {const num = Math.floor(event.currentTime)setPosition(num)});// 监听播放状态，true or falseconst {isPlaying} = useEvent(player, 'playingChange', {isPlaying: player.playing})// 格式化进度时间显示const formatTime = (seconds) => {if (Number.isNaN(seconds)) {return '0:00'}const mins = Math.floor(seconds / 60);const secs = Math.floor(seconds % 60);return `${mins}:${secs < 10 ? '0' : ''}${secs}`;};return (<TouchableOpacityactiveOpacity={1}onPressOut={handleVideoPress}className={isFullscreen ? '' : 'mt-10'}><VideoView style={{width: width,height: isFullscreen ? height : width / 16 * 9,backgroundColor: 'black',}}player={player}nativeControls={false}allowsPictureInPicture/>{showCustomControls &&<View className='absolute inset-0 flex flex-col justify-between bg-black/50'>{'idle' === status || 'error' === status ?<><Imagesource={require('@/images/poster.png')}className='absolute inset-0 w-full h-full'resizeMode="cover"/><View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><TextclassName={'error' !== status ? 'color-green-500' : 'color-red-500'}>{'error' !== status ? '加载中...' : '加载失败'}</Text></View></>:<><View className='h-1/6 justify-around items-center'><Text className="text-white text-lg font-bold">{formatTime(position)} / {formatTime(duration)}</Text></View><View className='flex-row justify-around items-center'><TouchableOpacityclassName='p-1 bg-white/30 rounded-lg'onPress={rewind}><Image source={require('@/icons/left.png')}style={{width: 25, height: 25}}tintColor='#FFFFFF'contentFit="contain"/></TouchableOpacity><TouchableOpacityclassName='p-1 bg-white/30 rounded-lg'onPress={togglePlayPause}><Imagesource={isPlaying ? pause : play}style={{width: 25, height: 25}}tintColor='#FFFFFF'contentFit="contain"/></TouchableOpacity><TouchableOpacityclassName='p-1 bg-white/30 rounded-lg'onPress={fastForward}><Image source={require('@/icons/right.png')}style={{width: 25, height: 25}}tintColor='#FFFFFF'contentFit="contain"/></TouchableOpacity></View><View className='flex-row justify-center items-center h-1/6'>{/* 进度条 */}<TouchableWithoutFeedbackonPress={handleProgressBarPress}><View className='p-2.5 flex-1'><View className='h-1 bg-gray-300 rounded-sm'><ViewclassName='h-full bg-[#f8509c] rounded-sm'style={{width: (position === 0 ? '0%' : `${(position / duration) * 100}%`)}}/></View></View></TouchableWithoutFeedback>{/*全屏控制按钮*/}<View style={{paddingRight: 5}}><TouchableOpacityclassName='p-0 bg-white/0 rounded-lg'onPress={toFullscreen}><Image source={isFullscreen ? fullScreenExit : fullScreenEnter}style={{width: 20, height: 20}}tintColor='#FFFFFF'contentFit="contain"/></TouchableOpacity></View></View></>}</View>}</TouchableOpacity>);
}
