react-native - 播放视频时 react-native-track-player 不会停止

Question

我使用了库 react-native-track-player 版本 ^2.0.0-rc13（最新版本），我还使用了 react-native-webview "7.5.2"，因为我需要使用一个 youtube 直播视频。

问题是当收音机正在播放时，我试图播放 youtube streming 视频，收音机继续播放

有什么解决办法吗？收音机怎么会停止播放？

这是代码 youtube 直播视频：

 return (
        <WebView
          style={style || null}
          source={{ uri: videoUrl }}
          scrollEnabled={false}
        />
      )

这是无线电代码

export default class LiveRadio extends Component {

  state = {
    scrollY: new Animated.Value(0),
    uri: require('@images/live.png'),
  }



  radio = async () => {
    // Creates the player
    TrackPlayer.setupPlayer().then(async () => {

      // Adds a track to the queue
      await TrackPlayer.add({
        id: 'trackId',
        url: 'url',
        title: 'Radio',
        artist: 'Radio',
        artwork: require('@assets/logo.png'),
        // type: 'hls',
      });
      await TrackPlayer.play();
    });

  }


  _onStop = async () => {
    TrackPlayer.stop();
  };

  play() {
    this.radio()

  }

  pause = async () => {
    TrackPlayer.pause();
  }

  playPause() {
    if (this.state.isplaying == true) {
      this.setState({
        //imageURL : '@images/pause.png',
        isplaying: false

      })
      this.pause()
    }

    if (this.state.isplaying == false) {
      this.setState({
        //imageURL : '@images/pause.png',
        isplaying: true

      })
      this.play()
    }

  }

  // volume(val) {
  //   TrackPlayer.setVolume(val);
  // }



  render() {
    const PLAY_RADIO = require('@images/play.png');
    const PAUSE_RADIO = require('@images/pause.png');
    const STOP_RADIO = require('@images/stop.png');
    const NEXT_IMG = require('@images/next.png');
    const BACK_IMG = require('@images/back1.png');

    return (
      <View >
        <AnimatedHeader image={Images.logo} scrollY={this.state.scrollY} />
        <LinearGradient
          style={styles.linearGradient}
          colors={['rgb(59, 118, 212)', 'rgb(0, 0, 0)' ]}
        >
            <View>

              <View style={{
                alignItems: 'center'
              }}>
                <Image style={{
                  margin: 20,
                  height: 100,
                  width: 70,
                  overflow: "hidden", tintColor: '#FFF'
                }} source={require('@images/microphone.png')} />
              </View>


              <View style={{ alignItems: 'center', }}>
                <View style={{ margin: 20, alignItems: 'center', flexDirection: 'row' }}>
                  <Image style={styles.imgArrow}
                    source={
                      BACK_IMG
                    } />

                  <TouchableOpacity onPress={() => this.playPause()}>
                    <Image style={styles.img}
                      source={
                        this.state.isplaying
                          ? PAUSE_RADIO
                          : PLAY_RADIO
                      }
                    />
                  </TouchableOpacity>

                  <Image style={styles.imgArrow}
                    source={
                      NEXT_IMG
                    } />
                </View>


              </View>


            </View>


        </LinearGradient>


      </View>
    );
  }



}

标签： react-native

Answer 1

我解决了这个问题，只在返回的视频中添加

render(){
TrackPlayer.addEventListener('remote-duck', () => { TrackPlayer.destroy() }); 
return (
        <WebView
          style={style || null}
          source={{ uri: videoUrl }}
          scrollEnabled={false}
        />
      )
}