react-native-video：如何在单击按钮时加载下一个视频？

Question

我有一个视频数组，称为VIDEOS [ ]，当我单击一个按钮时，其索引会增加 +1。该按钮触发函数nextVideo()。

我正在使用 react-native-video

如何让播放器播放下一个视频？ 所以

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

需要使用名为currentVideo 的更新计数器重新加载App.js 中的render() 函数。

代码如下：

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

在需要时触发重新渲染的一种方法是将视频索引变量放入组件的状态并在点击时更新它。

这是你的一些修改和 cmets 的代码：

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>
  );