简介
React Native 是 Facebook 开源的跨平台移动应用开发框架，通过 JavaScript 和 React 来编写原生的 iOS、Android 应用。React Native-Music 是一款基于 React Native 开发的音乐播放器，支持播放本地音乐和在线音乐。
本文将介绍如何使用 npm 包 react-native-music 开发音乐播放器应用。
安装
在项目中安装 react-native-music：
npm install react-native-music --save
在你的 React Native 项目中链接 react-native-music：
react-native link react-native-music
现在你的应用已准备完毕，接下来让我们来探索 react-native-music 提供的功能。
使用
音乐列表
首先需要准备音乐列表，在本地新建一个 musicList.json 文件并添加以下内容：
-- -------------------- ---- -------
-
-
----- ----
-------- ---- ------------- -------- - -------- --- ------ --------
--------- ---- --------------
-------- ------ --- -----
------ --------------------------------------------------------------
-------- ---------------------------------------------------------------------------
--------- ----------- -- - ------ --------------- ------------- ------------- ----- -
--
-
----- ----
-------- ------- ---- ------ - ----- - --- -- ------
--------- ------- ---- ------- -------
-------- ---- -- ------
------ --------------------------------------------------------------
-------- ---------------------------------------------------------------------------
--------- ----------- -- - ---------- ----------- -
-
-播放音乐
在 App.js 文件中引入 react-native-music：
import MusicPlayer from 'react-native-music'; ...
在组件中渲染音乐列表并添加点击事件：
-- -------------------- ---- -------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------------- -----
---------- --
--
-
----- ------------------- -
----- -------- - ----- --------------------------
----- ---- - ----- ----------------
--------------- ---------- ---- ---
-
--------------- - ------- -- -
--------------------------- -
------ ------------
------- -------------
------ ------------
------- ------------
---
--------------- -------------- ----- ---
-
-------- -
----- - ---------- ------------- - - -----------
------ -
----- -------------------------
---------------------- -- -
-----------------
--------------
------------------------
----------- -- ----------------------------
-
-------------------------------- - - - ---------------- - ----------
-------------- -- ---------------- --- -------- -- -
----- ---------------------------------------
--
-------------------
---
-------
--
-
-至此，我们已可以使用 react-native-music 播放音乐。接下来将讲解一些其他的功能。
暂停/继续播放
我们可以添加一个按钮来暂停/继续播放当前音乐：
-- -------------------- ---- -------
----- --- ------- --------- -
---
---------------------- - -- -- -
---------------------------------- -- -
-- --------- - -- -
------------------------
-
---
-
-------- -
---
------ -
----- -------------------------
---
-------------- -- -
-----------------
---------------------
-------------------------------------
-
------
------------------------ - ------- - ---------
-------
-------------------
--
-------
--
-
-停止播放
我们可以添加一个按钮来停止播放当前音乐：
-- -------------------- ---- -------
----- --- ------- --------- -
---
--------------- - -- -- -
-------------------
--------------- -------------- ---- ---
-
-------- -
---
------ -
----- -------------------------
---
-------------- -- -
-----------------
---------------------
------------------------------
-
-----------------
-------------------
--
-------
--
-
-修改播放进度
我们可以添加一个 slider 来修改播放进度：
-- -------------------- ---- -------
----- --- ------- --------- -
---
--------------- - ------- -- -
---------------------------------------- -- -
----- -------- - --------------------------
----------------------------- - -------- - ------ - ------
---
-
-------- -
---
------ -
----- -------------------------
---
-------------- -- -
--
-------
---------------------
----------------
----------------
-------------------------------
----------------------------
------------------------
----------------------------------------
--
-----------------
---------------------
-------------------------------------
-
------
------------------------ - ------- - ---------
-------
-------------------
-----------------
---------------------
------------------------------
-
-----------------
-------------------
---
--
-------
--
-
-总结
通过本文的学习，我们已经掌握了使用 npm 包 react-native-music 开发音乐播放器应用的方法，并实现了如播放、暂停、继续、停止、修改播放进度等功能。
更多 react-native-music 的功能请参考官方文档：https://github.com/kevinresol/react-native-music。
示例代码：https://github.com/mrdfunding/react-native-music-tutorial。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551e681e8991b448cf55c