探索React Native Video Demo: 一个创新的移动视频解决方案

import React, { useRef, useEffect, useState } from 'react';
import { StyleSheet, View, Text, Button, Alert } from 'react-native';
import Video from 'react-native-video';
 
const VideoDemo = () => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
 
  useEffect(() => {
    if (isPlaying) {
      videoRef.current.playAsync();
    }
  }, [isPlaying]);
 
  const playPauseVideo = () => {
    setIsPlaying(!isPlaying);
  };
 
  const onVideoError = (error) => {
    Alert.alert('Error', error.message);
  };
 
  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        style={styles.video}
        source={{ uri: 'http://your-video-url.mp4' }}
        onError={onVideoError}
        controls
      />
      <Button title={isPlaying ? 'Pause' : 'Play'} onPress={playPauseVideo} />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  video: {
    width: 300,
    height: 200,
    marginBottom: 10,
  },
});
 
export default VideoDemo;

这个代码示例展示了如何使用React Native Video组件来播放视频。它使用了Hooks API来管理组件的状态，并且提供了播放和暂停视频的功能。同时，它也包含了错误处理，当视频遇到问题时，会弹出一个警告框显示错误信息。