react-native APP 需要播放视频功能,这里选用 react-native-video 库,这个库在 GitHub 上有 3k+ 的星。
简单使用
import Video from 'react-native-video';
import * as _ from 'lodash';
class Introduction extends React.Component<IIntroductionProps, any> {
static navigationOptions = ({ navigation }: any) => ({
title: "title",
});
player: any;
constructor(props: IIntroductionProps) {
super(props);
this.state = {
videoWidth: 0,
videoHeight: 0,
playerIconVisible: true,
paused: true,
playableDuration: 0,
currentTime: 0
};
}
render() {
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<Video
style={{
flex: 1,
width: this.state.videoWidth,
height: this.state.videoHeight
}}
source={{ uri: "http://cdn.xxx.com/videos/xxx.mp4" }} // Can be a URL or a local file.
ref={(ref: any) => (this.player = ref)}
paused={this.state.paused}
onEnd={() => {}}
onError={() => {}}
onLoad={(e: any) => {
// console.log('onLoad: ', e);
this.setState({ playableDuration: _.get(e, "duration", 0) });
}}
onProgress={(e: any) => {
this.setState({ currentTime: _.get(e, "currentTime", 0) });
}}
// onFullscreenPlayerDidPresent={() => {}}
/>
</View>
);
}
}
编译问题
安卓编译报错 1:
* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApk'.
> A problem occurred configuring project ':react-native-video'.
> Could not resolve all dependencies for configuration ':react-native-video:_debugPublishCopy'.
> Could not find com.android.support:support-annotations:27.0.0.
Searched in the following locations:
file:/Users/wwpeng520/Library/Android/sdk/extras/android/m2repository/com/android/support/support-annotations/27.0.0/support-annotations-27.0.0.pom
解决方案:android/build.gradle 中加上 maven { url 'https://maven.google.com' }
,如下所示:
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
url 'https://maven.google.com'
}
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
安卓编译报错 2:
Dex: The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html
UNEXPECTED TOP-LEVEL EXCEPTION:
com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
at com.android.dx.merge.DexMerger$6.updateIndex(DexMerger.java:502)
// ...其他信息
:app:transformClassesWithDexForDebug FAILED
FAILURE: Build failed with an exception. * What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: java.lang.UnsupportedOperationException
解决方案:android/app/build.gradle 中 defaultConfig 加上 multiDexEnabled = true
。
安卓编译报错 3:
Error:Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: java.lang.UnsupportedOperationException
这个编译错误是因为引入过多的第三方 jar 包导致的。在编译文件 build.gradle 中 android 下加入如下代码,即可解决。
dexOptions{
javaMaxHeapSize "4g"
}
网友评论