如何在react原生曲目播放器中完成音频播放时更改播放图标

Question

我正在使用react-native-track-player。我的问题是，当我的音频完成时，我的简历图标不会自动变成播放图标。谁来看看我的代码帮帮我。

您好，我使用的是react-native-track-player。我的问题是，当我的音频完成时，我的简历图标不会自动变成播放图标。谁来看看我的代码帮帮我。

<Button
  onPress={() => this.playOrpause()}
  style={{
    backgroundColor: 'white',
    borderRadius: 30,
    borderWidth: 2,
    borderColor: '#1191cf',
    height: 60,
    width: 60,
    bottom: 5,
  }}>
  {this.state.AudioStatus || !this.playing ? (
    <Icon
      name="ios-play"
      style={{ color: '#1191cf', fontSize: 32, left: 6 }}
    />
  ) : (
      <Icon
        name="md-pause"
        style={{ color: '#1191cf', fontSize: 24, left: 6 }}
      />
    )}
</Button>




playOrpause = async () => {
  //this.setState({AudioStatus: !this.state.AudioStatus});
  const currentTrack = await TrackPlayer.getCurrentTrack();
  if (currentTrack == null || !this.playing) {
    TrackPlayer.reset();
    this.setPlayer(
      this.props.audio,
      this.props.title,
      this.props.speaker,
      this.props.speaker_image,
    );
    TrackPlayer.play();
  } else {
    console.log(await TrackPlayer.getState());
    if ((await TrackPlayer.getState()) === 2 || (await TrackPlayer.getState()) === 0 || (await TrackPlayer.getState()) === 1 || (await TrackPlayer.getState()) === 'paused' || (await TrackPlayer.getState()) === 'ready' || (await TrackPlayer.getState()) === 'idle') {
      TrackPlayer.play();
    } else {
      TrackPlayer.pause();
    }
  }
  this.UpdateTrackUI();
};

Answer 1

我以前没有用过react-native-track-player，但是通过观察你的代码，你的图标是基于this.state.AudioStatus || !this.playing的

由于this.playing不是state/prop，因此更改this.playing的值不会导致重新渲染，因此您的按钮也不会更改。如果在其他部分没有错误，那么将this.playing迁移到this.state.playing应该是可行的:)。