Skip to content

Expo SDK

· 1 min

除了上一小节介绍的第三方库以外，expo 本身也为我们提供了丰富的 Expo SDK 供我们使用，例如前面在快速入门章节我们所接触到的 expo-image-picker，就是其中的一员。

你可以在 https://docs.expo.dev/versions/latest/ 中查看到 expo 中提供的所有 SDK

例如如果我们要播放视频，就可以使用 Expo SDK 中所提供的 Video。

用于播放视频，使用之前需要安装 expo-av 依赖。

文档地址：https://docs.expo.dev/versions/v45.0.0/sdk/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={require('./data/123.mp4')}
        source={{
          uri: 'https://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>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
})