response-native-video: как загрузить следующее видео при нажатии кнопки?

Question

У меня есть массив видео под названием VIDEOS [ ], индекс которого увеличивается на +1, когда я нажимаю кнопку.Кнопка запускает функцию nextVideo().

Я использую реагирующее видео-видео

Как мне заставить плеер воспроизводить следующее видео?Поэтому

<Video source={{uri: VIDEOS[currentVideo]}} /> 

необходимо перезагрузить в моей функции render() в App.js с обновленным счетчиком, названным currentVideo.

Код ниже:

constructor(props) {
    super(props);

    //Video properties
    this.state = {
        repeat: false,
        paused: false,
    };
    //VIDEO index variable
    global.currentVideo = 0;
 }

  nextVideo() { 
    //Skip video when button is pressed to next video in list
    if (global.currentVideo != VIDEOS.length-1)
    {
        global.currentVideo = global.currentVideo + 1;
    }
    else
    {
        global.currentVideo = 0;
    }
   }

 render() {
    return (
        <View style={styles.container}>
          <View style={styles.video}>
           <Video 
            source={{uri: VIDEOS[global.currentVideo]}}
            ref={(ref) => {this._player = ref}}
            style={styles.video}
           />    
          </View>
          <View style={styles.button}>
            <Button
              onPress={this.nextVideo}
            />
          </View>
        </View>
  );

Answer 1

Один из способов вызвать повторную визуализацию, когда вам это нужно, - поместить переменную индекса видео в состояние вашего компонента и обновить ее по щелчку.

Вот ваш код с изменениями и комментариями:

constructor(props) {
    super(props);

    //Video properties
    this.state = {
        repeat: false,
        paused: false,
        currentVideo: 0, // <-- moved it to state
    };

    this.nextVideo = this.nextVideo.bind(this); //<-- bind method, since we're accessing this
 }

  nextVideo() { 
    //Skip video when button is pressed to next video in list
    if (this.state.currentVideo != VIDEOS.length-1)
    {
        this.setState({currentVideo: this.state.currentVideo + 1}); //<-- use setState instead of assignment to update
    }
    else
    {
        this.setState({currentVideo: 0}); //<-- use setState instead of assignment to update
    }
   }

 render() {
    return (
        <View style={styles.container}>
          <View style={styles.video}>
           <Video 
            source={{uri: VIDEOS[this.state.currentVideo]}}
            ref={(ref) => {this._player = ref}}
            style={styles.video}
           />    
          </View>
          <View style={styles.button}>
            <Button
              onPress={this.nextVideo}
            />
          </View>
        </View>
  );