如何在 react-native 中播放背景視頻？

Question

我正在嘗試在 react-native 中播放背景視頻，但我遇到了一個對我來說沒有意義的問題/錯誤。

我是本機反應的新手。

這是我的整個代碼：

  import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Video } from 'expo'

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Card>
        <AssetExample />
      </Card>


      <Video
      source={{ uri: "https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/artistarea/Lighthouse%20stands%20in%20Istanbul%E2%80%99s%20harbour_0554659b-5dc1-43d6-8a93-b31ec6b67f63/Cinemagraph_plain/1920x1080/cinemagraph.mp4"}}
      style={styles.backgroundVideo}
      rate={1}
      shouldPlay={true}
      isLooping={true}
      volume={1}
      muted={true}
      resizeMode="cover"
      />


    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  }, 
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

我得到的錯誤是這樣的：

Error: Minified React error #130; visit [snack internals]
    at Fl ([snack internals]
    at p ([snack internals]
    at g ([snack internals]
    at [snack internals]
    at ki ([snack internals]
    at ms ([snack internals]
    at dl ([snack internals]
    at sl ([snack internals]
    at Zs ([snack internals]
    at https://snack.expo.io/web-player/39/static/js/2.208ff912.chunk.js:2:4091769

如果您只是在snack.expo.io 網站中復制/粘貼我的代碼，您也會在那里看到錯誤。

有人可以就這個問題提出建議嗎？

Answer 1

嘗試將import {Video} from 'expo'更改為import {Video} from 'expo-av'