如何以本机显示处于锁定屏幕/背景状态的媒体控件

Question

我正在做本机项目。我正在播放一些从服务器获取的网络网址。它是单人游戏。

所以，要播放音频，我正在使用以下库。

https://www.npmjs.com/package/react-native-sound-player

并且我已经根据我的UI自定义了播放器控件。音频播放效果很好，而且我已在设置中启用了在后台模式下播放音频。

但是，如果我进入前台/锁定屏幕状态，则播放音频，但媒体控件未显示。

我是本机反应的新手，是否还需要针对背景/锁屏状态自定义媒体控件？或我需要做些什么来实现这一目标？

  componentDidMount() {
  const { audioURL } = this.state;
  SoundPlayer.playUrl(audioURL);
  }

    playPauseHandler = () => {
    const {
      paused, currentDuration, currentTime, audioSelectedIndex,
    } = this.state;
    console.log('currentDuration', currentDuration);
    console.log('currentTime', currentTime);
    this.getInfo();

    if (paused === true) {
      SoundPlayer.play();
      this.setState({ paused: !paused });
    } else {
      SoundPlayer.pause();
      this.setState({ paused: !paused });
    }
  }

       render() {

          return (

            <View style={styles.audioPlayerContainer}>
              <Image
                style={styles.podcastImage}
                source={{ uri: podcastImage }}
              />
              {/* <Text> {playTime} </Text> */}

              <View style={styles.sliderCloseButtonContainer}>
                <Slider
                  maximumValue={totalLength}
                  step={1}
                  value={currentTime}
                  onSlidingComplete={value => this.onValueChange(value)}
                  style={styles.slider}
                  thumbTintColor=“blue”
                // onSeek={this.seek.bind(this)}
                  trackLength={totalLength}
                // onSlidingStart={() => this.setState({ paused: true })}
                />
              </View>
              <View style={styles.stylesContainer}>
                  {title}
                </TextTicker>
                <TouchableWithoutFeedback onPress={this.playPauseHandler}>
                  <View style={styles.playButton}>
                    <Image source={paused ? res.images.play : 
                   res.images.pause} />
                  </View>
                </TouchableWithoutFeedback>
              </View>
            </View>
            )
            }
         );
      }

有什么建议吗？

Answer 1

有一个本机模块（一种已过时的模块，但仍在工作：

react-native-music-control