在 React Native 开发中，使用视频播放的需求越来越普遍。而在视频播放控件的 UI 设计方面，使用原生组件会增加开发难度和工作量。因此，我们可以使用 npm 包提供的第三方组件库来添加视频播放控件。
1. 简介
awesome-react-native-video-controls 是一个基于 React Native 和 react-native-video 组件库开发的自定义视频播放控件。该组件库遵循 MIT 开源协议，开发者可随意使用和修改。
该组件库提供了许多功能，包括：
- 视频播放控件 UI 的设计
- 视频进度条控制
- 视频播放暂停控制
- 音量调节控制
- 全屏观看控制
本篇文章就来详细介绍如何使用该组件库和配置相关的参数。
2. 使用方法
在使用 awesome-react-native-video-controls 组件库之前，需要先安装 react-native-video。
npm install react-native-video --save
接着，我们可以通过 npm 安装 awesome-react-native-video-controls 组件库。
npm install awesome-react-native-video-controls --save
安装好后，在组件中引入 Video 和 Controls 组件即可。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----------
-----
----
- ---- ---------------
------ ----- ---- ---------------------
------ -------- ---- ------------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -------------------------
------
--------- ---- --------------------------------------------------- --
---------- -- -
----------- - ---
--
--------------------
--
---------
---------- -- -
------------- - ---
--
-------------
------------ --
-------
--
-
-在上述例子中，我们在 Video 中引用了一个外部链接视频，Controls 控件传入了 paused 和 duration 两个参数。
2.1. 控件配置
接下来，我们来介绍 Controls 组件的配置：
paused: 控制视频是否处于暂停状态。 默认为false，也就是视频一开始就播放。
<Controls paused={true} />onPlayPress: 设置播放按钮被按下的回调函数。
<Controls onPlayPress={() => this.controls.togglePlay()} />onFullScreen: 设置全屏按钮被按下的回调函数。
<Controls onFullScreen={() => this.controls.toggleFullscreen()} />toolbarTitle: 设置工具栏标题的函数。
<Controls toolbarTitle={"My Video Title"} />toolbar: 是否显示工具栏。默认为true。
<Controls toolbar={false} />2.2. 事件监听
在播放视频的过程中，我们需要监听一些特定的事件。
2.2.1. onPlayPress
当用户点击视频控件中的播放按钮时，需要指定一个回调函数。
<Controls onPlayPress={() => {console.log('按钮被点击')}} />2.2.2. onPaused
当视频的播放暂停时，需要指定一个回调函数。
<Controls onPaused={() => {console.log('视频播放暂停')}} />2.2.3. onBuffer
当视频正在缓冲时，需要指定一个回调函数。
<Controls onBuffer={() => {console.log('视频正在缓冲')}} />2.2.4. onEnd
当视频播放结束时，需要指定一个回调函数。
<Controls onEnd={() => {console.log('视频播放结束')}} />3. 示例代码
以下是一个完整的使用 awesome-react-native-video-controls 组件库的代码示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----------
-----
----
- ---- ---------------
------ ----- ---- ---------------------
------ -------- ---- ------------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -------------------------
------
--------- ---- --------------------------------------------------- --
---------- -- -
----------- - ---
--
--------------------
----------------------
---------- -- -
--------------------
--
--
---------
---------- -- -
------------- - ---
--
-------------
--------------- -- ----------------------
------------ -- ----------------------
------------ -- ------------------------
--------- -- ----------------------
----------------- ----- -------
--------------- --
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
---------------- ----------
--
------ -
--------- -----------
------ -------
------- -------
--
---4. 总结
使用 awesome-react-native-video-controls 组件库，可以方便快捷地添加视频播放控件。本文详细介绍了如何在 React Native 中以及在 Controls 组件中配置参数和回调函数。开发者可以通过修改参数，实现自己的视频播放控件。
更多关于 awesome-react-native-video-controls 的详细情况欢迎到 npm 官网查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730981e8991b448e9353