react-native-video使用

react-native APP 需要播放视频功能,这里选用 react-native-video 库,这个库在 GitHub 上有 3k+ 的星。

简单使用

import Video from 'react-native-video';
import * as _ from 'lodash';

class Introduction extends React.Component {
  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 (
      
        
    );
  }
}

编译问题

安卓编译报错 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"
}

你可能感兴趣的:(react-native-video使用)