react-native - 如何在使用 expo-av 反应原生音乐完成时更改暂停图标以播放

Question

当前onClick，音乐将播放/暂停。我想将图标从暂停更改为播放音乐完全播放时，但除非我单击暂停图标，否则它不会改变。我正在考虑根据音频的毫秒数设置 setTimeout，但它超出了我的想象。请帮我在音乐完成后更改 state.isPlaying 的值。请帮忙！新手在这里

  state = {
    isPlaying: false,
    playbackInstance: null,
    currentIndex: 0,
    volume: 4.0,
    isBuffering: false,
  };

  componentDidMount = async () => {
    try {
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: false,
        interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
        playsInSilentModeIOS: true,
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
        shouldDuckAndroid: true,
        staysActiveInBackground: true,
        playThroughEarpieceAndroid: true,
      });

      this.loadAudio();
    } catch (e) {
      console.log(e);
    }
  };

  loadAudio = async () => {
    console.log("@@@@", audios[0]["uri"]);
    const { currentIndex, isPlaying, volume } = this.state;

    try {
      const playbackInstance = new Audio.Sound();
      const source = {
        uri: audios[currentIndex]["uri"],
      };
      const status = {
        shouldPlay: isPlaying,
        volume,
      };

      playbackInstance.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
      await playbackInstance.loadAsync(source, status, false);
      this.setState({ playbackInstance });
    } catch (e) {
      console.log(e);
    }
  };

  onPlaybackStatusUpdate = (status) => {
    this.setState({
      isBuffering: status.isBuffering,
    });
  };

  handlePlayPause = async () => {
    const { isPlaying, playbackInstance } = this.state;
    isPlaying
      ? await playbackInstance.pauseAsync()
      : await playbackInstance.playAsync();
    this.setState({
      isPlaying: !isPlaying,
    });
  };

render() {
    return (
      <View>
 
        <View style={styles.controls}>
         
          <TouchableOpacity      
            onPress={this.handlePlayPause}
          >
            {this.state.isPlaying ? (
              <Ionicons name="ios-pause" size={48} color="#444" />
            ) : (
              <Ionicons name="ios-play-circle" size={48} color="#444" />
            )}
          </TouchableOpacity>   
      </View>
    );
  }

提前致谢！

标签： react-nativeaudioexpoaudio-playerexpo-av