5

React Native と React Native Soundを使用してオーディオ プレーヤーを作成していますが、現在いくつかの問題に直面しています。私の問題は、現在再生中の曲を停止して次の曲を再生したいのですが、これを行う方法がわかりません。これが私のコードです：

React、React Native、React Native Sound を使用しています。

export default class PlaySound extends Component {

  constructor(props) {
    super(props);

    this.state = {
      stop: false,
      playing: false
    };

    this.stopTrack = () => {
     if(!this.state.playing){
       return;
     }
      this.setState({ stop: false });
      this.state.playing.stop();
    }
  }

  renderTrackButton(track){
    if(this.state.stop){
      return (
        <Button danger onPress={() => this.stopTrack()}>
          <Text>Stop</Text>
        </Button>
      );
    }else{
      return (
        <Button onPress={() => this.playTrack(track)}>
          <Text>Play</Text>
        </Button>
      );
    }
  }


  playTrack = (track) => {
    const callback =(error, sound) => {
      if(error) throw error;
      this.setState({ stop: true, playing: sound });
      sound.play();
    }
    const sound = new Sound(track.url, error => callback(error, sound));
  }

  render() {
    console.log(this.state);
    return (
      <Container>
        <Header>
          <Text style={{ color:'white', fontWeight:'bold', marginTop:15 }}>Play Sound Demo</Text>
          <Right>
            <Icon name="heart" />
          </Right>
        </Header>
        <Content>
          {tracks.map((track) => (
            <Card key={track.chinese}>
              <CardItem>
                <Body>
                  <Text>{track.pinyin}</Text>
                  <Text>{track.chinese}</Text>
                </Body>
                <Right>
                  {this.renderTrackButton(track)}
                </Right>
              </CardItem>
            </Card>
          ))}
        </Content>
      </Container>
    );
  }
}

AppRegistry.registerComponent('PlaySound', () => PlaySound);
4

0 に答える 0