Question

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

我正在使用react-native-video

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

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

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

以下代码：

currentVideo

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

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

1 个答案: