reactnative集成 react-native-webrtc的坑太多了

第一次成功的编译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' }
    }
}

  1. 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文件夹。编译成功,下一步就是看能否把功能实现了。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值