react-native - 反应原生视频结束后显示按钮

Question

我想显示一个按钮（继续），只有当我完成在 React Native 中观看整个视频时我正在观看我上传到 firebase 存储的视频

我是否有可能知道我何时到达视频的结尾？

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


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={true}
                              resizeMode={"cover"}
                              rate={1.0}
                              ignoreSilentSwitch={"obey"}
                              />
                              ):(
                          <Image source={white}}/>
                          )}
                        </View>

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

                     </SafeAreaView>
                </KeyboardAvoidingView>
            </CustomBackground>
        )
    }
}

Answer 1

您可以通过将回调传递给 onPlaybackStatusUpdate 属性来跟踪视频的状态。

有关播放状态的更多信息： https ://docs.expo.io/versions/latest/sdk/av/#playback-status

前任：

export default class VideoModalChild extends React.Component {
...
onStatusUpdate = (status) => {
  if(status.didJustFinish) {
    // set state or do whatever you need to
   }
}
render() {
  <Video 
    onPlaybackStatusUpdate={this.onStatusUpdate} 
    {...props} 
  />
}
}