['react-native-video'中包含{Video}后出现此错误。否则我的代码可以正常工作

Posted 2023-01-23

**这是我得到的错误代码，下面是我的完整代码。我用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,
    
  );

] 1] 1

答案

如果您正常安装了Reac-native-Video模块，这里似乎有错误。

import videomp4 from './Src/Assets/video.mp4';

尝试使用此代码代替此代码。

const videomp4 = require('./Src/Assets/video.mp4');