《React-Native-Video实现视频全屏播放的方法》
在移动端开发中，视频播放是常见的功能需求。React Native生态中，react-native-video库因其跨平台特性和丰富的API成为开发者首选。本文将深入探讨如何通过react-native-video实现全屏播放功能，涵盖基础配置、全屏逻辑、状态管理、平台差异处理等核心内容，并提供完整代码示例。
一、基础环境准备
1.1 安装react-native-video
npm install react-native-video --save
# 或
yarn add react-native-video1.2 平台依赖配置
iOS需在Podfile中添加：
pod 'ReactNativeVideo', :path => '../node_modules/react-native-video'Android需在android/app/build.gradle中添加：
implementation project(':react-native-video')1.3 权限声明
AndroidManifest.xml添加网络权限：
iOS需在Info.plist中添加：
NSAppTransportSecurity
NSAllowsArbitraryLoads
二、基础视频组件实现
2.1 基础播放器组件
import Video from 'react-native-video';
const BasicPlayer = ({ source }) => {
return (
);
};2.2 关键属性说明
-
source: 视频源，支持网络URL或本地文件 -
style: 必须设置宽高，否则无法显示 -
controls: 是否显示原生控制条 -
resizeMode: 缩放模式（contain/cover/stretch）
三、全屏播放实现方案
3.1 全屏状态管理
使用React的useState管理全屏状态：
const [isFullScreen, setIsFullScreen] = useState(false);3.2 全屏切换逻辑
通过修改style属性实现全屏切换：
const toggleFullScreen = () => {
setIsFullScreen(!isFullScreen);
};3.3 完整组件实现
import React, { useState } from 'react';
import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
const VideoPlayer = ({ source }) => {
const [isFullScreen, setIsFullScreen] = useState(false);
const [screenDimensions, setScreenDimensions] = useState({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
});
const toggleFullScreen = () => {
if (isFullScreen) {
setScreenDimensions({
width: Dimensions.get('window').width,
height: 200 // 默认高度
});
} else {
setScreenDimensions({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
});
}
setIsFullScreen(!isFullScreen);
};
return (
{isFullScreen ? '退出全屏' : '全屏播放'}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
video: {
backgroundColor: 'black'
},
fullscreenButton: {
position: 'absolute',
bottom: 20,
right: 20,
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 10,
borderRadius: 5
}
});四、高级功能实现
4.1 横屏全屏适配
Android需要处理屏幕方向：
import { ScreenOrientation } from 'expo-screen-orientation'; // 或使用react-native-orientation
const lockToLandscape = async () => {
if (Platform.OS === 'android') {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
}
};
const unlockOrientation = async () => {
if (Platform.OS === 'android') {
await ScreenOrientation.unlockAsync();
}
};4.2 全屏状态事件监听
通过onLayout事件获取准确尺寸：
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
const handleLayout = (event) => {
const { width, height } = event.nativeEvent.layout;
setDimensions({ width, height });
};
// 在Video组件中添加
4.3 自定义控制条实现
隐藏原生控制条并实现自定义UI：
const [paused, setPaused] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
五、平台差异处理
5.1 iOS全屏处理
iOS需要处理AVPlayerViewController的全屏特性：
const isIOS = Platform.OS === 'ios';
// 在Video组件中添加
style={[
styles.video,
isIOS && isFullScreen && {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
]}
fullscreen={isFullScreen} // iOS专用属性
fullscreenAutorotate={true} // iOS专用属性5.2 Android全屏处理
Android需要处理系统UI的隐藏：
import { StatusBar } from 'react-native';
const enterFullScreen = () => {
StatusBar.setHidden(true);
// 其他Android全屏逻辑
};
const exitFullScreen = () => {
StatusBar.setHidden(false);
// 其他Android退出全屏逻辑
};六、性能优化建议
6.1 预加载策略
6.2 内存管理
useEffect(() => {
return () => {
// 组件卸载时执行清理
};
}, []);6.3 缓冲策略优化
七、完整示例代码
import React, { useState, useEffect } from 'react';
import {
View,
StyleSheet,
TouchableOpacity,
Text,
Dimensions,
Platform,
StatusBar
} from 'react-native';
import Video from 'react-native-video';
import { ScreenOrientation } from 'expo-screen-orientation';
const FullScreenVideoPlayer = ({ source }) => {
const [isFullScreen, setIsFullScreen] = useState(false);
const [dimensions, setDimensions] = useState({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
});
const [paused, setPaused] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const toggleFullScreen = async () => {
if (isFullScreen) {
exitFullScreen();
} else {
enterFullScreen();
}
setIsFullScreen(!isFullScreen);
};
const enterFullScreen = async () => {
setDimensions({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
});
if (Platform.OS === 'android') {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
StatusBar.setHidden(true);
}
};
const exitFullScreen = async () => {
setDimensions({
width: Dimensions.get('window').width,
height: 200
});
if (Platform.OS === 'android') {
await ScreenOrientation.unlockAsync();
StatusBar.setHidden(false);
}
};
const handleLayout = (event) => {
const { width, height } = event.nativeEvent.layout;
setDimensions({ width, height });
};
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
video: {
backgroundColor: 'black'
},
controls: {
position: 'absolute',
bottom: 20,
left: 0,
right: 0,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
export default FullScreenVideoPlayer;八、常见问题解决方案
8.1 全屏后视频不显示
解决方案：确保设置了正确的宽高，iOS需要添加position: 'absolute'
8.2 Android横屏后状态栏不隐藏
解决方案：使用StatusBar.setHidden(true)并配合react-native-orientation
8.3 全屏切换时画面闪烁
解决方案：添加过渡动画或使用key属性强制重新渲染
8.4 iOS全屏控制条不显示
解决方案：确保设置了fullscreen和fullscreenAutorotate属性
关键词：React Native、react-native-video、全屏播放、视频组件、跨平台开发、状态管理、平台差异、性能优化
简介：本文详细介绍了在React Native中使用react-native-video库实现视频全屏播放的方法，涵盖基础配置、全屏逻辑实现、平台差异处理、自定义控制条、性能优化等核心内容，提供了完整的代码示例和常见问题解决方案。
