Я получаю эту ошибку после того, как включил {Видео} из'act-native-video '. В противном случае мой код работал нормально

Question

** Это код ошибки, который я получаю, а ниже мой полный код. Я установил response-native-video с помощью пряжи, а затем также связал его с ios и android **. Я получаю эту ошибку после того, как включил {Video} из response-native-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:

Реакция Native 0.60 и выше

Выполнить pod install в каталоге ios. Связывание не требуется в React Native 0.60 и выше.

React Native 0.59 и ниже

Запустите react-native link react-native-video, чтобы связать библиотеку реагировать-нативного видео.

Использование CocoaPods (требуется для включения кэширования) Настройте ваш Podfile, как описано в документации о реагировании.

В зависимости от ваших требований вы должны выбрать один из двух возможных подподсекций:

Только видео:

  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 для связи с библиотекой реагировать-нативного видео.

Или, если у вас возникли проблемы, вручную добавьте в указанные файлы следующие дополнения:

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): * 106 1 *

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()
    );
}