![](/img/trans.png)
[英]Undefined is not an object (evaluating '_reactNative.Nativemodules.UIManager.RCTVideo.Constants')
[英]react-native-video [android] undefined is not an object (evaluating NativeModuels.UIManager.RCTVideo.Constants')
我將 react native 集成到現有的 android 應用程序中,我正在嘗試使用 react-native-video 組件在應用程序上顯示視頻。
我按照這里的說明操作: https : //github.com/react-native-community/react-native-video
在 MainApplication.java 我添加了這個:
import com.brentvatne.react.ReactVideoPackage;
....
@Override
public List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactVideoPackage()
);
}
我將此添加到我的 settings.gradle (應用程序中只有一個)
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
在我的 android/app/build.gradle
compile project(':react-native-video')
在我的本機組件上:
import Video from 'react-native-video';
....
render() {
return (
<View>
<Video source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}} resizeMode="cover" repeat={true} />
....
反應原生組件正確構建,但最終在黃色屏幕上顯示此警告,沒有其他內容:
Possible Unhandled Promise Rejection (id: 0):
undefined is not an object (evaluating '_reactNative.NativeModules.UIManager.RCTVideo.Constants')
render@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:46677:73
http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12555:27
measureLifeCyclePerf@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12015:14
_renderValidatedComponentWithoutOwnerOrContext@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12554:45
_renderValidatedComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12575:78
performInitialMount@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12227:55
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12130:40
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
mountChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11615:56
initializeChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:9929:41
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:10012:28
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
performInitialMount@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12235:48
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12130:40
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
performInitialMount@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12235:48
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12130:40
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
performInitialMount@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12235:48
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12130:40
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
mountChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11615:56
initializeChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:9929:41
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:10012:28
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
performInitialMount@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12235:48
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:12130:40
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
mountChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11615:56
initializeChildren@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:9929:41
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:10012:28
mountComponent@http://localhost:8081/reactnative/wall.bundle?platform=android&dev=true&hot=false&minify=false:11170:49
performInitialMount@http://localhost:8081/reactnati
謝謝!
修復了在創建 ReactInstanceManager 時添加 ReactVideoPackage
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactVideoPackage())//<-- this line fixed
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
cd ios 和 pod install 並再次鏈接庫
import React, {Component} from 'react';
import {
View,
Button,
Text,
Platform,
StyleSheet,
TouchableOpacity,
TouchableHighlight,
Animated,
ScrollView,
Image,
} from 'react-native';
import Video from 'react-native-video';
export default class App extends Component {
render() {
return (
<View style={{flex: 1, marginTop: 50}}>
<Video
source={{uri: 'YOUR_URL'}} // Can be a URL or a local file.
ref={ref => {
this.player = ref;
}} // Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo}
/>
</View>
);
}
}
const styles = StyleSheet.create({
field: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom:10,
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
注意react-native 鏈接 react-native-video
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.