react native + as实现简易本地视频播放器

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { MediaPlayer } from 'expo-av';
 
export default function SimpleVideoPlayer({ source }) {
  const playerRef = useRef(null);
 
  useEffect(() => {
    (async () => {
      await MediaPlayer.setIsAudioOnly(false);
      await MediaPlayer.loadAsync({ ...source }, null, true, true);
    })();
  }, [source]);
 
  const play = async () => {
    await MediaPlayer.playFromPositionAsync(0);
  };
 
  const pause = async () => {
    await MediaPlayer.pauseAsync();
  };
 
  return (
    <View style={styles.container}>
      <MediaPlayer
        ref={playerRef}
        style={styles.video}
        resizeMode="contain"
        isLooping={false}
        useNativeControls
      />
      <View style={styles.buttonContainer}>
        <Button title="Play" onPress={play} />
        <Button title="Pause" onPress={pause} />
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  video: {
    width: 300,
    height: 200,
  },
  buttonContainer: {
    marginTop: 10,
  },
});

这个代码示例展示了如何在React Native应用中使用expo-av库来创建一个简易的视频播放器。它使用了MediaPlayer组件来加载和播放视频，并提供了播放和暂停视频的功能。这个示例简洁明了，并且使用了React Hooks来管理效果和引用。