我在从“react-native-video”中包含 {Video} 后收到此错误。否则我的代码运行正常
**这是我收到的错误代码,下面是我的完整代码。我用 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,
}
});
React-native-video
模块似乎没有正确安装。
请检查以下人员。
-
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。
根据您的要求,您必须在两个可能的 subpodspecs 之间进行选择:
仅限视频:
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()
);
}