React native introduces third party Android SDK

Luozhu 2021-04-07 21:40:57
react native introduces party android

Hello everyone , I am a @ Luozhu

This article was first published in The official website of luozhu

This article is synchronized with the official account 『 Luozhuzao Teahouse 』, Reprint please contact the author .

It's not easy to create , Develop habits , Quality triple !

stay React Native In development , If a native SDK No fit React Native Plug in for , In principle, we don't recommend you to use . But as a last resort , Do we have a way ? The answer is yes . The steps are roughly divided into integration SDK、 Write bridge code . It is difficult to know but easy to do , This article is to follow this idea to solve the problem of the front-end engineer's headache SDK And write bridge code .

Preliminary knowledge

When we were developing Android projects , Not all the functions make their own wheels , We often use all kinds of other packages , Among them are all kinds of services provided by Google support package , There are also various third-party libraries , Sometimes we package some functions ourselves . These packages exist and import in a variety of forms , There's a remote warehouse , There are direct copies to the local ,jar package 、aar package 、so Bag, etc . Fortunately, we can all work in the main project and various Module Of build.gradle We have a unified management in the company .— Android Rely on import strategy

Dependency Introduction

Android Gradle plugin 3.0 Several ways to introduce dependency :


Dependency on compiling with this command , Projects that depend on this project will not be able to access any programs in the dependencies compiled with this command , That is to hide the dependency inside , It's not open to the outside world .react-native link The command uses this method

Use implementation Will make compilation faster : For example, I'm in a library Use in implementation Rely on gson library , Then my main project relied on library, that , My main project is inaccessible gson Methods in the library . The advantage of this is that the compilation speed will be faster , I changed a version of Gson library , But as long as library The code is not changed , You don't recompile the main project code .


Equate to compile Instructions


Equate to provided, Only valid at compile time , Not involved in packaging , It doesn't include apk In file . It can be used to solve the conflict of repeated import .

Remote warehouse depends on

Here we have LeanCloud Android SDK To demonstrate

It's convenient to introduce remote warehouse dependency , But before that, we need to be in the project root build.gradle Declare the address of the remote repository .

buildscript {
repositories {
+ // Here is LeanCloud The bag warehouse 
+ maven {
+ url ""
+ }
dependencies {
classpath ''
allprojects {
repositories {
+ // Here is LeanCloud The bag warehouse 
+ maven {
+ url ""
+ }
 Copy code 

Then open the app In the catalog build.gradle Configure as follows :

android {
+ // In order to solve the problem that some third-party libraries are packed repeatedly META-INF The problem of 
+ packagingOptions{
+ exclude 'META-INF/LICENSE.txt'
+ exclude 'META-INF/NOTICE.txt'
+ }
lintOptions {
abortOnError false
dependencies {
compile ('')
+ // LeanCloud Basic package 
+ compile ('')
+ // Push and instant messaging need packages 
+ compile (''){transitive = true}
 Copy code 

Local dependence

Use Android Studio Please refer to : Android Studio introduce jar Bao He so file (armeabi and armeabi-v7a)

jar package

1、 take jar File replication 、 Paste the app/libs Directory ,React Native There is no such folder by default , I want to build a

2、 open app/build.gradle, Make the following configuration to list jar The folder path of the package .

Be careful :React Native This configuration has been made by default

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
 Copy code 

Different from the remote warehouse dependency Introduction , If there are two different local jar package , Or there are already jar package , And then to rely on different versions of jar package , You're going to report a mistake .

Solution : Take one of them compileOnly Replace implementation. seeing the name of a thing one thinks of its function ,compileOnly Works only at compile time , It doesn't include APK Inside , You can avoid finding duplicate classes at run time .

aar package

arr The full name is Andorid Archive, It's a Android Binary archive of Library Project , Use Android Studio , It's very easy to generate a AAR file .

and jar It's different ,aar The path declaration and dependency introduction of package storage are separate :

1、 take aar Package is copied to the lib Under the table of contents

2、 In the project root directory build.gradle In a statement aar File storage path

buildscript {
repositories {
+ flatDir { // Quote... From this project libs Under the aar
+ dir "$rootDir/libs"
+ }
allprojects {
repositories {
+ flatDir { // Quote... From this project libs Under the aar
+ dir "$rootDir/libs"
+ }
 Copy code 

3、 stay app/build.gradle Inject dependency into

Be careful : long-range aar The introduction form is :implementation('')

dependencies {
+ implementation(name: 'aar name ', ext: 'aar')
 Copy code 

so file

Directly in src->main Next, create a new folder jniLib , Then take it. so The folder where the file is located armeabi Copy the past .

notes :jniLib yes so The default directory for files


All are Proguard To blame

Sometimes it's obvious that jar package , But still can't find jar The method in the package ? It's probably because you opened up confusion , The safest thing is space for safety . But a real programmer can't be satisfied with this , We still have to find out Proguard What's the trouble . Here's a trick to share :

open Android Studio Use it like a native development engineer Logcat Check the application log , For example, if you find com.huawei.** This library can't be found , Then configure as follows :

+ -dontwarn com.huawei.**
+ -keep class com.huawei.**{*;}
 Copy code 
  • -dontwarn Let go ProGuard Don't warn that you can't find com.huawei.** Related references to classes in this package
  • -keep class To hold on to com.huawei.** All classes and methods in this package are not confused . Compile and package again , Find out apk The size should be significantly larger than the previous package . function app, Problem solving !

aar Duplicate resource file in package

Duplicate resource file , The resource file of the main project will be directly covered aar Files in package , And there won't be any errors or hints , Final aar The resource file of the main project will also be used directly in the package , So you need to pay attention to naming . There is no better solution for the moment .

AndroidManifest Merge error

It also happens in aar On the bag , Android Studio Each project module Any one of them can AndroidManifest.xml file , But in the end APK The file can only contain one AndroidManifest.xml file . When building applications ,Gradle The build will merge all the manifest files into a single package to APK In the manifest file .aar The manifest file of the package and our app When the properties of the manifest file conflict : use tools:replace=" Property name " solve .

annotationProcessor And compileOnly The difference between

As mentioned above annotationProcessor And compileOnly It's just compiling, not typing in apk in , What's the difference between them ? The roles are different ,annotationProcessor The function is to generate code at compile time , After compiling, you really don't need it ,compileOnly There are duplicate libraries , In order to keep only one library for shaving , In the end, it's needed .

Reference resources


  1. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  2. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  3. 用 Python 抓取公号文章保存成 HTML
  4. User login of front end spa project based on Vue and Quasar (2)
  5. Summary of common selectors in CSS
  6. Using Python to grab articles with public number and save them as HTML
  7. To "restless" you
  8. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  9. 【微信小程序】引入阿里巴巴图标库iconfont
  10. layui表格点击排序按钮后,表格绑定事件失效解决方法
  11. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  12. 【vue】 export、export default、import的用法和区别
  13. [free and open source] crudapi front end spa project based on Vue and Quasar
  14. [wechat applet] introduces Alibaba icon library iconfont
  15. Layui table click Sort button, table binding event failure solution
  16. Element树形控件Tree踩坑:修改current-node-key无效
  17. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  18. Element树形控件Tree踩坑:修改current-node-key无效
  19. The usage and difference of export, export default and import
  20. Element tree control: invalid to modify current node key
  21. Element tree control: invalid to modify current node key
  22. linux下安装apache(httpd-2.4.3版本)各种坑
  23. How to install Apache (httpd-2.4.3) under Linux
  24. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  25. Nacos serialize for class [] failed.
  26. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  27. Nacos serialize for class [ . common.http.HttpRestResult ] failed.
  28. Seamless management of API documents using eolink and gitlab
  29. vue 的基础应用(上)
  30. 28岁开始零基础学前端,这些血的教训你一定要避免
  31. Basic application of Vue
  32. Starting at the age of 28, you must avoid these bloody lessons
  33. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  34. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  35. 利用Vue实现一个简单的购物车功能
  36. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  37. Using Vue to realize a simple shopping cart function
  38. 【css】伪类和伪类元素的区别
  39. 【css效果】实现简单的下拉菜单
  40. 【vue】父子组件传值
  41. The difference between pseudo class and pseudo class elements
  42. [CSS effect] simple drop-down menu
  43. [Vue] value transfer by parent-child component
  44. 【css】设置table表格边框样式
  45. 【css】修改input,textarea中的placeholder样式
  46. vue-router的两种模式(hash和history)及区别
  47. CSS3的滤镜filter属性
  48. [CSS] set table border style
  49. [CSS] modify the placeholder style in input and textarea
  50. Two modes of Vue router (hash and History) and their differences
  51. Filter property of CSS3
  52. 全局安装gulp 报错问题解决
  53. Solution of error report in global installation of gulp
  54. 18个好用的自定义react hook
  55. 你应该知道的常用服务器HTTP状态码?
  56. 18 user defined react hooks
  57. What HTTP status codes should you know about common servers?
  58. 手把手教你打造属于自己团队的前端小报系统
  59. Hand in hand to teach you to build your own front-end tabloid system
  60. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?