npm 包 react-native-player-lockscreen 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动端开发中，锁屏播放控制是一项很常见的功能。而针对 React Native 开发的应用，使用 npm 包 react-native-player-lockscreen 可以方便地实现锁屏控制功能。本文将详细介绍该 npm 包的使用方法和注意事项。

开始使用

安装

在 React Native 项目中使用 npm 包 react-native-player-lockscreen 需要先进行安装。

建议使用 yarn 或 npm 进行安装：

# 使用 yarn 安装
yarn add react-native-player-lockscreen

# 或使用 npm 安装
npm install --save react-native-player-lockscreen

配置

iOS

1. 添加依赖库

打开 Xcode 工程，选择目标设备，在 Build Phases 选项卡中找到 Link Binary With Libraries，点击加号，添加下列依赖库：

MediaPlayer.framework
Foundation.framework
AudioToolbox.framework
AVFoundation.framework

2. 添加权限

在 Info.plist 中添加下列权限：

Privacy - Media Library Usage Description：Media access required to display album artwork and information.

3. 构建应用

执行 react-native run-ios 构建应用。

Android

在 AndroidManifest.xml 中添加下列权限：

<uses-permission android:name="android.permission.WAKE_LOCK" />

使用

导入包

在需要使用的组件文件中，导入 react-native-player-lockscreen 包：

import RNPlayerLockscreen from 'react-native-player-lockscreen';

初始化

在你的应用启动页面的 componentWillMount() 函数中，在初始化之前设置 RNPlayerLockscreen：

RNPlayerLockscreen.setup();

该代码将检查应用的当前播放情况，并正确启用锁屏播放控制功能。

显示控制器

当应用的音频播放状态为 playing 时，可以通过下列代码来显示控制器：

RNPlayerLockscreen.show({
  title: 'This is the title',
  artist: 'Artist',
  artwork: 'https://example.com/album-artwork.jpg',
});

上述代码将使用指定的信息显示播放器控制器。请确保传递的信息与实际音频一致。

隐藏控制器

当应用的音频播放状态不是 playing 时，可以通过下列代码来隐藏控制器：

RNPlayerLockscreen.hide();

该代码将隐藏播放器控制器。

示例代码

-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ------- ---- ---------------
------ ------------------ ---- ---------------------------------

----- --- ------- --------- -
  -------------------- -
    ---------------------------
  -

  ------------ -
    -------------------------
      ------ ----- -- --- -------
      ------- ---------
      -------- ----------------------------------------
    ---
  -

  ------------ -
    --------------------------
  -

  -------- -
    ------ -
      ----- ------------- -- --------------- --------- ----------- -----------
        ----------- ------ ------ ---------- --------------
        ------- ----------- -- ------------------ ----------- ------- --
        ------- ----------- -- ------------------ ----------- ------- --
      -------
    --
  -
-

------ ------- ----

注意事项

本包仅支持音频文件的锁屏播放控制，不支持视频文件的控制。
RNPlayerLockscreen.show() 函数需要传递 title、artist 和 artwork 信息，否则在某些情况下控制器不会正确显示。
在 Android 上，播放结束时，播放器控制器可能会有一定延迟才能自动从锁屏上移除。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600552ec81e8991b448d053a