Question

我想在卡上播放音频，当单击播放图标时，它将播放，我将播放器状态更新为正在播放，并且想要将播放图标更改为暂停图标。但是无法重新呈现卡。我已经读过https://github.com/alexbrillant/react-native-deck-swiper/issues/153，但没有解决方案，如何解决呢？

  setPlay2(index, sound, stopper = false) {
....
  this.setState({
    playing: 'playing',
  });
.....
}

const {
   playing
} = this.state;

 ....

<Swiper
 ref={(swiper) => {
    this.swiper = swiper;
}}
  cards={data}
   cardIndex={cardIndex}
    renderCard={card => (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={() => this.setPlay2()}>
            {
              playing === 'playing' ? (
      <Image source={require('@images/BasicAppMenu/pause.png')} style={{ height: 32, width: 32 }} />
                     ) : (
       <Image source=  {require('@images/BasicAppMenu/play.png')} style={{ height: 32, width: 32 
}} />
                             )
      }
  </TouchableOpacity>
 </View>
 )}
 />

Answer 1

只需检查playing元素内的<TouchableOpacity>-这是this.state.playing吗？您尚未包含所有代码。

如果没有，这可能有效吗？

 <TouchableOpacity onPress={() => this.setPlay2()}>
        {
          this.state.playing === 'playing' ? (
  <Image source={require('@images/BasicAppMenu/pause.png')} style={{ height: 32, width: 
    32 }} />
                 ) : (
   <Image source=  {require('@images/BasicAppMenu/play.png')} style={{ height: 32, 
     width: 32 
    }} />
                         )
  }
 </TouchableOpacity>

重新渲染React Swiper组件

1 个答案: