devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react native android 不再依赖本地node_modules仓库中的aar的方法

作者：很楠不爱3 | 2024-03-28 21:09:25

赞

踩

react-native 开发不安装node

React Native(后面会简称 RN)现在很火,很多app都使用了这个技术,个人认为:RN出现的目的是为了让写前端的人能够写出同时适配移动端(Android+ios)更流畅的App,而不是让原本写Native代码的人来用React.js去实现UI.由于之前的android工程已经存在了,因此不可能按照官方文档上的方式来搭建支持,需要在现有的Android project嵌入对RN的支持

在此不再介绍RN的环境是怎么搭建的了,我们直接切入主题

android Project配置RN的搭建中,需要在gradle中进行一些配置: ####1.项目根目录的build.gradle配置如下:

  1. allprojects {
  2.     repositories {
  3.         google()
  4.         jcenter()
  5.        //新增一个本地maven仓库 从rootDir(项目本地)/node_modules 目录中
  6.        //在此都说一句 node_modules 就是运行npm install 会自动生成的一个目录
  7.         maven {
  8.             // All of React Native (JS, Android binaries) is installed from npm
  9.             url "$rootDir/node_modules/react-native/android"
  10.         }
  11.     }
  12. }
  13.  
  14. 复制代码

####2.app 中的build.gradle配置如下:

  1. dependencies {
  2.     implementation fileTree(dir: 'libs', include: ['*.jar'])
  3.     implementation 'com.android.support:appcompat-v7:26.1.0'
  4.     implementation 'com.android.support.constraint:constraint-layout:1.1.0'
  5.     ...
  6.    //此处配置的这个implementation就是从 1步骤中的那个本地maven仓库中引用的
  7.     implementation "com.facebook.react:react-native:+" // From node_modules
  8. }
  9. 复制代码

看到这样的配置方式细想下有些奇怪,我们其它的依赖都是从jcenter() googleMaven()这次online的maven仓库中获取的,为什么RN的依赖需要配置从本地仓库获取呢? 原因是: facebook从 RN的0.20.1版本后就没有再往online的maven库上放新的RN版本的依赖了(为什么不放呢,谁知道呢,有知道原因的可以告诉我) ,那么如果我们不配置这个本地maven仓库,下载下来的RN依赖包都是0.20.1版本, 由于RN自身更新太快了,代码也不兼容(我当前的RN版本都是0.55.3了)你会发现,你按照官方的文档配置的demo压根就无法编译,会告知你方法找不到,参数不正确等等;

这种方式一般来说没有什么问题,例如我只在一个工程项目里使用,这个项目里即可以写react.js 直接npm start 运行(这就等价于是一个server),又可以在里面写android的代码打包生成apk(等价于client),但是现实中我可能只想把我们的Android工程作为一个client使用, 我只想能够解析bundle的代码然后运行就可以了,根本用不上node_modules这个目录中的其它文件(从上面配置本地maven仓库来看,我们只使用了node_modules/react-native/android),那么有没有什么更好的方法呢?其实是有的,很简单:我们既然知道了本地maven仓库的真实目录,那么我们能否看看这个目录里有什么呢?

可以看到图中的node_modules/react_native/android 目录中的全部文件,那么其实我们需要的就是这个react-native-0.54.3.aar, 我们能不能copy这个aar 然后放到我们的项目的中引用呢? 答案是可以的!不过操作上并非这么简单,有2种方法可以做到,分为笨方法和聪明方法:

操作前提:先把上面1,2步骤配置gradle的代码给注释掉

##1.笨方法: 我们直接把aar copy到我们项目的libs目录然后:

  1. implementation fileTree(dir: 'libs', include: ['*.jar','*.aar'])
  2. 复制代码

这样就可以引用到aar了,但是你编译时会发现报错 提示你缺少XXX等等,为什么呢? 这是因为这个aar中还依赖了其它的jar or aar,所以我们需要把这些包也给implementation 进来, 我们看下具体有哪些包? 打开上图中的pom文件:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  4.   <modelVersion>4.0.0</modelVersion>
  5.   <groupId>com.facebook.react</groupId>
  6.   <artifactId>react-native</artifactId>
  7.   <version>0.54.3</version>
  8.   <packaging>aar</packaging>
  9.   <name>ReactNative</name>
  10.   <description>A framework for building native apps with React</description>
  11.   <url>https://github.com/facebook/react-native</url>
  12.   <licenses>
  13.     <license>
  14.       <name>BSD License</name>
  15.       <url>https://github.com/facebook/react-native/blob/master/LICENSE</url>
  16.       <distribution>repo</distribution>
  17.     </license>
  18.   </licenses>
  19.   <developers>
  20.     <developer>
  21.       <id>facebook</id>
  22.       <name>Facebook</name>
  23.     </developer>
  24.   </developers>
  25.   <scm>
  26.     <connection>scm:git:https://github.com/facebook/react-native.git</connection>
  27.     <developerConnection>scm:git:git@github.com:facebook/react-native.git</developerConnection>
  28.     <url>https://github.com/facebook/react-native.git</url>
  29.   </scm>
  30.   <dependencies>
  31.     <dependency>
  32.       <groupId>javax.inject</groupId>
  33.       <artifactId>javax.inject</artifactId>
  34.       <version>1</version>
  35.       <scope>compile</scope>
  36.     </dependency>
  37.     <dependency>
  38.       <groupId>com.android.support</groupId>
  39.       <artifactId>appcompat-v7</artifactId>
  40.       <version>23.0.1</version>
  41.       <scope>compile</scope>
  42.     </dependency>
  43.     <dependency>
  44.       <groupId>com.facebook.fbui.textlayoutbuilder</groupId>
  45.       <artifactId>textlayoutbuilder</artifactId>
  46.       <version>1.0.0</version>
  47.       <scope>compile</scope>
  48.     </dependency>
  49.     <dependency>
  50.       <groupId>com.facebook.fresco</groupId>
  51.       <artifactId>fresco</artifactId>
  52.       <version>1.3.0</version>
  53.       <scope>compile</scope>
  54.     </dependency>
  55.     <dependency>
  56.       <groupId>com.facebook.fresco</groupId>
  57.       <artifactId>imagepipeline-okhttp3</artifactId>
  58.       <version>1.3.0</version>
  59.       <scope>compile</scope>
  60.     </dependency>
  61.     <dependency>
  62.       <groupId>com.facebook.soloader</groupId>
  63.       <artifactId>soloader</artifactId>
  64.       <version>0.1.0</version>
  65.       <scope>compile</scope>
  66.     </dependency>
  67.     <dependency>
  68.       <groupId>com.google.code.findbugs</groupId>
  69.       <artifactId>jsr305</artifactId>
  70.       <version>3.0.0</version>
  71.       <scope>compile</scope>
  72.     </dependency>
  73.     <dependency>
  74.       <groupId>com.squareup.okhttp3</groupId>
  75.       <artifactId>okhttp</artifactId>
  76.       <version>3.6.0</version>
  77.       <scope>compile</scope>
  78.     </dependency>
  79.     <dependency>
  80.       <groupId>com.squareup.okhttp3</groupId>
  81.       <artifactId>okhttp-urlconnection</artifactId>
  82.       <version>3.6.0</version>
  83.       <scope>compile</scope>
  84.     </dependency>
  85.     <dependency>
  86.       <groupId>com.squareup.okio</groupId>
  87.       <artifactId>okio</artifactId>
  88.       <version>1.13.0</version>
  89.       <scope>compile</scope>
  90.     </dependency>
  91.     <dependency>
  92.       <groupId>org.webkit</groupId>
  93.       <artifactId>android-jsc</artifactId>
  94.       <version>r174650</version>
  95.       <scope>compile</scope>
  96.     </dependency>
  97.   </dependencies>
  98. </project>
  99. 复制代码

这就是所有的依赖了,当然不一定是每个都要依赖,可能有的你已经下载过了,比如我配置的:

  1.     implementation 'com.facebook.soloader:soloader:0.1.0+'
  2.     implementation 'com.squareup.okhttp3:okhttp:3.6.0'
  3.     implementation 'com.squareup.okhttp3:okhttp-urlconnection:3.6.0'
  4.     implementation 'com.facebook.fresco:fresco:1.3.0'
  5.     implementation 'com.facebook.fresco:drawee:1.3.0'
  6.     implementation 'com.facebook.fresco:fbcore:1.3.0'
  7.     implementation 'com.facebook.fresco:imagepipeline:1.3.0'
  8.     implementation "com.facebook.fresco:imagepipeline-okhttp3:1.3.0"
  9.     implementation 'javax.inject:javax.inject:1'
  10. 复制代码

//TOOD 还缺少com.facebook.fbui.textlayoutbuilder, org.webkit android-jsc我这里是下载了aar包放到本地libs了,实际配置中可以根据自己的需求来做 这里注明下 一定要加入javax.inject:javax.inject:1的依赖,否则会报错(即使你看到你的Android Studio项目中的external libraries已经有这个jar也要加)

##2. 聪明方法: facebook的RN的远程仓库的版本是0.20.1,那么我们能否把新的RN的版本也放到远程maven仓库中去呢, 然后只引用一个implementation "com.facebook.react:react-native:0.54.3"? 我想这种方式是可以的,不过最好你是有一个私有的maven远程仓库 ,然后把aar + pom至少这2个文件都上传上去,具体方法我就不说了(因为我这没私有仓库),有仓库可操作的人可以试试.

转载于:https://juejin.im/post/5b036e15f265da0b74527ab1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/331421
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号