react-native-video全屏播放及屏幕旋转适配指南

"使用react-native-video实现视频全屏播放的方法" React Native 是一个流行的JavaScript框架，用于构建原生移动应用程序。在React Native中，`react-native-video`是一个强大的组件，专门用于处理视频播放任务。这个开源库提供了丰富的功能，使得开发者能够轻松地在iOS和Android平台上实现视频播放。 ### `react-native-video` 的主要功能 1. **控制播放速率**：允许用户调整视频播放速度，如慢速播放或快速播放。 2. **音量控制**：可以调节视频的音量大小，包括静音功能。 3. **播放与暂停**：支持基本的播放和暂停操作。 4. **后台音频播放**：在应用退至后台时仍能继续播放音频。 5. **自定义样式**：可以设置视频组件的宽度和高度，以适应不同的布局需求。 6. **事件监听**：提供多种事件回调，如`onLoad`、`onEnd`、`onProgress`和`onBuffer`，开发者可以据此更新UI。 7. **进度跳转**：通过`seek`方法，用户可以跳转到视频的任意位置进行播放。 8. **加载远程和本地视频**：支持通过URL加载远程视频，也可以直接播放本地存储的视频文件。 9. **全屏播放**：`presentFullscreenPlayer`方法在iOS上支持全屏播放，但在Android上可能存在兼容性问题（参考issue #534和#726）。 ### 实现全屏播放 在iOS上，`react-native-video`提供了`presentFullscreenPlayer`方法来实现全屏播放。这个方法会将视频组件扩展到整个屏幕，提供全屏观看体验。然而，在Android上，由于这个问题尚未完全解决，开发者可能需要自定义处理来达到类似的效果。这通常涉及监听设备的旋转事件，并相应地调整视频组件的尺寸。 ### 注意事项 - **设置源**：`source`属性是必须的，它接受一个包含`uri`的对象，对于远程视频，或者一个本地资源路径，如`require`返回的值。 - **非空uri**：`uri`不应为空字符串，必须指向有效的视频资源。 - **安装配置**：安装`react-native-video`后，需要执行`react-native link react-native-video`来完成链接过程，确保组件能正确集成到项目中。 ### 示例代码 ```jsx import React from 'react'; import Video from 'react-native-video'; const MyVideoPlayer = () => { const handleFullScreen = () => { if (Platform.OS === 'ios') { videoRef.current.presentFullscreenPlayer(); } else { // 自定义Android全屏逻辑 } }; return ( <Video ref={(ref) => (videoRef = ref)} source={{ uri: 'http://www.example.com/video.mp4' }} style={{ width: 300, height: 200 }} resizeMode="contain" onEnd={() => console.log('Video ended')} onBuffer={() => console.log('Buffering...')} onPress={handleFullScreen} /> ); }; export default MyVideoPlayer; ``` 以上代码展示了如何创建一个简单的视频播放器，包括设置源、自定义样式、监听事件以及调用全屏方法。在实际开发中，你可能需要根据项目需求对这些功能进行更复杂的定制。 `react-native-video`是一个强大且灵活的工具，为React Native开发者提供了丰富的视频处理能力，尽管在某些平台上的全屏播放可能需要额外的工作，但总体上它能很好地满足大部分视频播放需求。