在React Native Track Player中完成音频后如何更改播放图标

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：）。