React Native如何监听视频播放结束并在播放完成后显示继续按钮

你使用的react-native-video库原生提供了播放结束的监听回调，按以下步骤修改即可实现需求：

1. 调整State配置，新增播放完成标识 #

在构造函数的state中加入是否播放完成的状态位：

constructor(props){
    super(props)
    this.state={
        showTaskVisible:false,
        isVideoFinished: false // 新增：标识视频是否播放完成
    }
    // 绑定方法this指向
    this.handleVideoEnd = this.handleVideoEnd.bind(this)
    this.toggleisModal = this.toggleisModal.bind(this)
}

2. 新增视频结束回调方法、补全模态框切换方法 #

在class中加入两个方法：

// 视频播放结束触发的回调
handleVideoEnd() {
    this.setState({
        isVideoFinished: true
    })
}
// 你原有代码中用到的模态框切换方法，之前未定义需要补充
toggleisModal() {
    this.setState(prev => ({
        showTaskVisible: !prev.showTaskVisible
    }))
}

3. 修改Video组件属性 #

• 把原有的repeat={true}改为false，否则视频循环播放永远不会触发结束回调
• 绑定onEnd属性为刚才编写的handleVideoEnd方法：

<Video
    source={{uri:task.video}} 
    shouldPlay
    muted={true}
    repeat={false} // 此处从true改为false
    resizeMode={"cover"}
    rate={1.0}
    ignoreSilentSwitch={"obey"}
    onEnd={this.handleVideoEnd} // 新增结束监听回调
/>

4. 条件渲染「继续」按钮 #

仅当视频播放完成后才显示按钮：

{this.state.isVideoFinished && (
    <TouchableOpacity onPress={()=>this.toggleisModal()}>    
        <Text>Continuuuue</Text>
    </TouchableOpacity>
)}

修改后完整代码 #

export default class VideoModalChild extends React.Component{
    constructor(props){
        super(props)
        this.state={
            showTaskVisible:false,
            isVideoFinished: false
        }
        this.handleVideoEnd = this.handleVideoEnd.bind(this)
        this.toggleisModal = this.toggleisModal.bind(this)
    }

    handleVideoEnd() {
        this.setState({
            isVideoFinished: true
        })
    }

    toggleisModal() {
        this.setState(prev => ({
            showTaskVisible: !prev.showTaskVisible
        }))
    }

    render(){
        const task=this.props.task;
        return(
            <CustomBackground>
                <Modal animationType="slide" visible={this.state.showTaskVisible} onRequestClose={()=>this.toggleisModal()}>
                     <TodoModalChild task={task} closeModal={()=>this.toggleisModal()}/>
                </Modal>

                <KeyboardAvoidingView>
                     <SafeAreaView>                    
                        <View>
                           {task.video? (
                           <Video
                              source={{uri:task.video}} 
                              shouldPlay
                              muted={true}
                              repeat={false}
                              resizeMode={"cover"}
                              rate={1.0}
                              ignoreSilentSwitch={"obey"}
                              onEnd={this.handleVideoEnd}
                              />
                              ):(
                          <Image source={white}/>
                          )}
                        </View>
                        {this.state.isVideoFinished && (
                            <TouchableOpacity onPress={()=>this.toggleisModal()}>    
                                <Text>Continuuuue</Text>
                            </TouchableOpacity>
                        )}
                     </SafeAreaView>
                </KeyboardAvoidingView>
            </CustomBackground>
        )
    }
}

内容的提问来源于stack exchange，提问作者user123456