react-native-youtube API完全手册：属性、事件与方法全解析
react-native-youtube API完全手册：属性、事件与方法全解析
react-native-youtube是一个专为React Native开发的YouTube组件，提供了丰富的API来实现视频播放功能。本手册将全面解析其属性、事件与方法，帮助开发者快速掌握这个强大工具的使用技巧。
核心属性详解
基础配置属性
apiKey（必填）- YouTube Data API密钥，可从Google Cloud控制台获取。
videoId- 单个视频ID，用于播放特定视频。
videoIds- 视频ID数组，用于创建播放列表。
playlistId- YouTube播放列表ID，用于加载完整播放列表。
播放控制属性
play- 布尔值，控制视频播放/暂停状态。
loop- 布尔值，设置视频是否循环播放。
fullscreen- 布尔值，控制是否全屏显示。
controls- 数字类型(1|2|3)，设置控制栏显示样式：
- 1: 最小控制模式
- 2: 默认控制模式
- 3: 增强控制模式
外观与行为属性
showinfo- 布尔值，控制是否显示视频信息（标题、上传者等）。
modestbranding- 布尔值，启用简约品牌模式，减少YouTube标识显示。
showFullscreenButton- 布尔值，控制是否显示全屏按钮。
rel- 布尔值，控制视频结束后是否显示相关视频推荐。
origin- 字符串，指定视频播放的源域名，用于安全验证。
事件处理机制
onError- 错误处理回调，接收错误事件对象。
onReady- 视频准备就绪回调，通常在此处开始播放视频。
onChangeState- 播放状态变化回调，可捕获播放、暂停、结束等状态。
onChangeQuality- 视频质量变化回调，返回当前质量设置。
onChangeFullscreen- 全屏状态变化回调，返回当前全屏状态。
onProgress- 播放进度回调，定期返回当前播放时间等信息。
实例方法大全
播放控制方法
seekTo(seconds)- 跳转到指定时间点播放（单位：秒）。
nextVideo()- 播放下一个视频（用于播放列表）。
previousVideo()- 播放上一个视频（用于播放列表）。
playVideoAt(index)- 播放指定索引的视频（用于视频数组）。
信息获取方法
getVideosIndex()- 获取当前播放视频在列表中的索引。
getCurrentTime()- 获取当前播放时间（单位：秒）。
getDuration()- 获取视频总时长（单位：秒）。
实用工具方法
reloadIframe()- 重新加载视频播放器，用于解决某些播放问题。
独立播放器API
iOS独立播放器
import { YouTubeStandaloneIOS } from 'react-native-youtube'; // 播放单个视频 YouTubeStandaloneIOS.playVideo('VIDEO_ID');Android独立播放器
import { YouTubeStandaloneAndroid } from 'react-native-youtube'; // 播放单个视频 YouTubeStandaloneAndroid.playVideo({ apiKey: 'YOUR_API_KEY', videoId: 'VIDEO_ID', autoplay: true, startTime: 10 // 从第10秒开始播放 }); // 播放视频列表 YouTubeStandaloneAndroid.playVideos({ apiKey: 'YOUR_API_KEY', videoIds: ['VIDEO_ID_1', 'VIDEO_ID_2'], startIndex: 0 }); // 播放播放列表 YouTubeStandaloneAndroid.playPlaylist({ apiKey: 'YOUR_API_KEY', playlistId: ['PLAYLIST_ID'], startIndex: 0 });组件样式设置
通过style属性可以自定义播放器容器样式，支持所有React Native的ViewStyle属性：
<YouTube apiKey="YOUR_API_KEY" videoId="dQw4w9WgXcQ" style={{ width: '100%', height: 200 }} />完整类型定义
所有API的类型定义都可以在main.d.ts文件中找到，包含了详细的接口定义和参数说明，是开发时的重要参考资料。
安装与使用
要开始使用react-native-youtube，首先需要克隆仓库：
git clone https://gitcode.com/gh_mirrors/re/react-native-youtube然后按照项目README中的说明进行安装和配置，即可在你的React Native项目中集成强大的YouTube播放功能。
无论是构建视频应用还是在现有应用中添加视频播放功能，react-native-youtube提供的完整API都能满足你的需求，让视频集成变得简单而高效。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考