第一次成功的编译react-native + react-native-webrtc android app
好几天了,都不见成效由于不了解android 的编译过程只熟悉js所以走了很多弯路,重新学习gradle(android编译需要gradle)参考了很多网站,最终编译成功,但只是里程碑的一半后面的路至少不用费太多脑细胞
react-native中文网.
react-native-webrtc.
一,安装所需要的程序
1.根据中文网安装react-native0.61.0
npx react-native init AwesomeProject
安装一个react-native的初始版本。
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android
运行看看能否编译成功,我用真机来调试,只要用usb插上手机就可以
或安装特定版本号例如
npx react-native init MyApp --version 0.44.3
2.根据react-native-webrtc来安装,我的版本号为1.75.3
yarn add react-native-webrtc
#或者
yarn add react-native-webrtc@1.75.3
#安装特定版本号
二,配置webrtc(踩坑)
根据react-native-webrtc配置.我踩了很多坑,有一开始看不明白到最后仔细研究每一个错误,暂时解决问题,现总结一下以备不时之需
我一共修改了以下文件:
1 android/build.gradle,这个文件根据官方配置需要修改,但是我没有修改他
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
- android/settings.gradle 添加了后面两个。
rootProject.name = 'doctor'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
include ':WebRTCModule' //添加这一行
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android') //添加这一行
3 android/app/build.gradle 这里我遇到了找不到WebRTCModule的问题,导致一系列的编译不通过官方的方法有问题。取消不用
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
// compile project(':WebRTCModule') //官方给的方法,发现不能用过时了
//implementation':WebRTCModule' //这个方法能用但是由于丢失了链式传递导致了错误 can't find WebRTCModule 所以改用下面的方法。
implementation(project(':WebRTCModule'))
}
4 android\app\src\main\AndroidManifest.xml 给app赋予手机的各种权限
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
5 android\app\src\main\java\com\xxx\MainApplication.java
package com.doctor;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.oney.WebRTCModule.WebRTCModulePackage; // <--- 添加这行信息
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new WebRTCModulePackage()); // <-- 添加这行信息
return packages;
}
....下面的语句没有放进来注意
};
....
}
6 有时候发生无法创建文件夹的问题就比如
F:\program\xxx\node_modules\react-native-webrtc\android\build\intermediates\incremental\packageDebugResources\merged.dir\values
错误代码说无法创建文件夹values
我就只好手动创建 values文件夹。编译成功,下一步就是看能否把功能实现了。