如何将 OS 视频控件用于 react-native-video？答案

【问题标题】：How to use OS video controls for react-native-video?如何将 OS 视频控件用于 react-native-video？
【发布时间】：2022-01-11 17:34:36
【问题描述】：

有没有办法在 React Native 中使用内置的 iOS/Android 视频控件进行视频播放？

例如，这是它在 iOS 上的样子

【问题讨论】：

标签： react-native react-native-video

【解决方案1】：

我使用expo-av 库来执行此操作。你也可以在裸项目中使用这个库。 (https://github.com/expo/expo/tree/master/packages/expo-av)

获取原生视频控件所需要做的就是传入useNativeControls。这里有代码和示例 (https://snack.expo.dev/@heytony01/video)

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';

export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={{
          uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
      <View style={styles.buttons}>
        <Button
          title={status.isPlaying ? 'Pause' : 'Play'}
          onPress={() =>
            status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
          }
        />
      </View>
    </View>
  );
}

【讨论】：