react-native - 我在包含 'react-native-video' 中的 {Video} 后收到此错误。否则我的代码工作正常

Question

**这是我得到的错误代码，下面是我的完整代码。我用 yarn 安装了 react-native-video，然后也将它与 ios 和 android 链接了**我在包含来自“react-native-video”的 {Video} 后收到此错误。否则我的代码工作正常。我想在我的应用程序中有一个背景视频，但它不起作用。

import React, {Component,Fragment} from 'react';
import { StyleSheet, Text, View, ImageBackground,Image,TouchableOpacity,Dimensions} from 'react-native';
import Video from 'react-native-video';



import Img from './Src/Assets/Images/3.jpg';
import arrow from './Src/Assets/Icons/arrow_right.png';
import videomp4 from './Src/Assets/video.mp4';

const { height } = Dimensions.get("window");


export default class getStarted extends Component {






    render() {


      return (
        <View style={styles.container}  >

          <ImageBackground style={styles.background} source={Img}>
         <Video style={styles.backgroundVideo} source = {videomp4}/>
          <Text style={styles.appName}  >Welcome</Text>
          <Text style={styles.introduction}>Feel less stressed and more mindful with meditation.</Text>
        
        <TouchableOpacity
        style={styles.button}>
          <View style={styles.OpacityView}>
            <Text style={styles.login}>Get Started</Text>
            <Image style={styles.icon} source={arrow}/>
         </View>
        </TouchableOpacity>
        <View style = {styles.EndView}>
        <Text style={styles.haveNoAccount}>Don't have an account?</Text>
        <Text style={styles.SignUp}>SignUp</Text>
        </View>
         </ImageBackground>
         
        </View>
      );
    }
  }




const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#ffffff',
    },
    backgroundVideo: {
      height: height,
      position: "absolute",
      top: 0,
      left: 0,
      alignItems: "stretch",
      bottom: 0,
      right: 0
      },
    OpacityView:
    {
    flexDirection:'row', 
    backgroundColor:'#333333',
    height:50,
    width:320,
  },
    background:{
      flex:1,
      height:'100%',
      width:'100%',
      justifyContent: 'center',
    },
    appName:{
      textAlign: 'center',
      color: '#ffffff',
      fontWeight:'bold',
      fontSize:50,
      marginBottom:4,
      marginTop:450,
     },
    login:{
      textAlign: 'center',
      color: '#ffffff',
      fontWeight:'bold',
      alignSelf:'flex-start',
      paddingTop:18,
      paddingLeft:20,
      fontSize:18,
    },
      button: {
        alignItems: "center",
        backgroundColor: "#333333",
        width:350,
        height:60,
        alignSelf:"center",
        marginTop:10,
        opacity:20,
        borderRadius:10,
      },
    icon:{
      height:22,
      width:22,
      marginLeft:160,
      marginTop:17,
    },
    introduction: {
      textAlign: 'center',
      color: '#ffffff',
      fontSize:20, 
      marginLeft:33,
      marginBottom:20,
      justifyContent:"center",
      marginRight:33,
    },
    haveNoAccount: {
      textAlign: 'center',
      color: '#ffffff',
      fontSize:16, 
      marginTop:20,
      justifyContent:"center",
      alignSelf:'center',
    },
    SignUp: {
      color: '#ffffff',
      fontSize:15, 
      fontWeight:'bold',
      marginLeft:5,
      marginTop:20,
    },
    EndView:{
    flexDirection:'row', 
    alignSelf:'center',
    alignItems:'center',
    height:50,
    marginLeft:0,
    marginRight:0,
    }
  });

Answer 1

React-native-video 模块似乎没有正确安装。

请检查以下工作人员。

1. npm install --save react-native-video

IOS :

React Native 0.60 及以上版本

在 ios 目录中运行 pod install。 React Native 0.60 及更高版本不需要链接。

React Native 0.59 及以下版本

运行 react-native link react-native-video 链接 react-native-video 库。

使用 CocoaPods(需要启​​用缓存)按照 react-native 文档中的描述设置您的 Podfile。

根据您的要求，您必须在两个可能的 subpodspec 之间进行选择:

仅限视频:

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

带有缓存的视频(更多信息):

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end

Android :

运行 react-native link react-native-video 链接 react-native-video 库。

或者，如果您遇到问题，请手动向给定文件添加以下内容:

android/settings.gradle较新的 ExoPlayer 库适用于大多数人。

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

android/app/build.gradle从版本 >= 5.0.0 开始，您必须应用这些更改:

dependencies {
   ...
    compile project(':react-native-video')
+   implementation "androidx.appcompat:appcompat:1.0.0"
-   implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

}

android/gradle.properties迁移到 AndroidX(需要版本 >= 5.0.0):

android.useAndroidX=true
android.enableJetifier=true

MainApplication.java在顶部，导入的位置:

import com.brentvatne.react.ReactVideoPackage;

将 ReactVideoPackage 类添加到您的导出包列表中。

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}