将React Native集成至Android原生应用

Android Studio 2.1 Preview 4生成的空项目
react-native 环境 0.22.2

初次编译后apk有1.1M,还算可以接受。 默认依赖的lib如下图所示:

1.app/build.gradle里添加如下代码:

compile 'com.facebook.react:react-native:0.20.+'

再次编译后apk竟然有10.3M,太夸张了,我们来看看倒底都是什么占用了这么大的空间,仔细看一下其中包含:

我们一起来认识一下这个库是起什么作用的:

  • android-jsc-r174650:Android 里的 jsc 引擎
  • appcompat-v7-23.0.1:appcompat v7 支持库
  • bolts-android-1.1.4:Facebook 开发的 Android 的底层库集合,主要是处理 Task
  • drawee-0.8.1:fresco 控件中的一个负责显示的底层库,包含在 fresco 里
  • fbcore-0.8.1:Facebook 内核库
  • fresco-0.8.1:Facebook 开发的一款强大的 Android 图片处理库
  • imagepipeline-0.8.1:负责完成加载图片(网络、本地文件,本地资源),包含在fresco里
  • imagepipeline-okhttp-0.8.1:负责完成加载图片前的网络请求,包含在 fresco 里
  • jackson-core-2.2.3:负责处理 JSON 数据
  • jsr-305:供检查软件缺陷用的注解
  • library-2.4.0:nineoldandroids 开源动画库
  • okhttp-2.5.0:强大的网络请求库
  • okhttp-ws-2.5.0:okhttp 的 web sockets 功能库
  • okio-1.5.0:Square 公司开发的补充 java.io 和 java.nio 的不足,用于更加方便,快速的访问、存储和处理你的数据
  • react-native-0.20.1:react native 库,上面和下面这些库都是被带进来的 :)
  • recyclerview-v7-23.0.1:Android 5.0 v7 RecyclerView 扩展库
  • stetho-1.2.0:Facebook 开发的 Chrome Developer 工具,用来调试React Native程序
  • stetho-okhttp-1.2.0:stetho 的网络请求支持库
  • support-annotations-23.0.1:帮助 Android Studio 检测代码中可能存在的错误
  • support-v4-23.0.1:Android v4 支持库

如果原Android项目应用了这些插件,那恭喜你,可以复用了,反之就要算办法精减(我也还在研究)。

2.在MainActivity里添加跳转至ReactNativeActivity的代码(模拟业务场景)

3.添加ReactNativeActivity页面,向里面添加代码(官网那些代码太老了,这个版本是最曼妙的)

4.向AndroidManifest.xml里添加 .ReactNativeActivity 和 com.facebook.react.devsupport.DevSettingsActivity

5.拷贝如下文件夹及文件到Android项目根目录

  • node_modules(文件夹。从之前 init React Native 项目里拷一份过来。因为 npm install 成功率很低,就算是用taobao的源,也很慢)

  • .flowconfig (JavaScript 静态类型检查工具配置文件)

  • .watchmanconfig(Facebook 开发的用来监视文件并且记录文件的改动情况,当文件变更就触发一些操作, 如:Enable Live Reload的功能)

  • index.android.js(文件。操作方式同上,注意 class 名称与下面 register 时名称要一致)

  • package.json(文件。操作方式同上,注意文件内容里的 name 和 react-native 版本号)

6.修改如下文件

  • .gitignore(在该文件里添加排除项,node_modules/ 和 npm-debug.log)

  • app/build.gradle (将 'com.android.support:appcompat-v7:23..1' 改为 'com.android.support:appcompat-v7:23..1')

  • gradle.properties (在文件末尾添加,android.useDeprecatedNdk=true)

注意:小坑一个,如果遇到。请按第6项修改,并且要保证 react-native 版本是0.21.0以上

歪果朋友也深受其害,https://github.com/facebook/react-native/issues/6152#issuecomment-200759453

java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/package.name-2/base.apk)

at com.facebook.react.modules.netinfo.NetInfoModule.(NetInfoModule.java:55)

at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:62)

at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:751)

at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:688)

at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:84)

代码地址:https://github.com/Kennytian/embedded,欢迎star

将React Native集成至Android原生应用的更多相关文章

  1. Angular团队公布路线图,并演示怎样与React Native集成

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...

  2. React Native – 使用 JavaScript 开发原生应用

    前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...

  3. React Native App设置&Android版发布

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  4. React Native hot reloading & Android & iOS

    React Native hot reloading & Android & iOS https://facebook.github.io/react-native/docs/debu ...

  5. 关于React Native项目在android上UI性能调试实践

    我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...

  6. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  7. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  8. React Native 4 for Android源码分析 一《JNI智能指针之介绍篇》

    文/ Tamic: http://blog.csdn.net/sk719887916/article/details/53455441 原文:http://blog.csdn.net/eewolf/a ...

  9. React Native工程修改Android包名

    默认初始化的React Native工程,生成Android工程的时候,包名默认是React Native工程的名字,跟一般Android工程com.company.xxx不一样. 这时候就需要手动修 ...

随机推荐

  1. Linux基础入门学习笔记之四

    环境变量与文件查找 环境变量 变量 所谓shell变量,就是计算机中用于记录一个值(不一定是数值,也可以是字符或字符串)的符号,而这些符号将用于不同的运算处理中.通常变量与值是一对一的关系,可以通过表 ...

  2. 2016-2017-2 20155309 南皓芯《java程序设计》第八周学习总结

    教材学习内容总结 本周学习的主要是第十四章,第十五章的内容. NIO与NIO2 同步非阻塞IO(Java NIO) : 同步非阻塞,服务器实现模式为一个请求一个线程,即客户端发送的连接请求都会注册到多 ...

  3. js中的Object.seal()与Object.freeze()

    关键字:seal, freeze, property descriptor. 1.Object.seal() 参考文档(2)中这样描述: The Object.seal() method seals ...

  4. Struts 2 - Architecture

    From a high level, Struts2 is a pull-MVC (or MVC2) framework. The Model-View-Controller pattern in S ...

  5. CCF CSP 201503-1 图像旋转

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201503-1 图像旋转 问题描述 旋转是图像处理的基本操作,在这个问题中,你需要将一个图像逆 ...

  6. 【AtCoder】AGC005F - Many Easy Problems

    题解 我们把一个点的贡献转化为一条边的贡献,因为边的数量是点的数量-1,最后再加上选点方案数\(\binom{n}{k}\)即可 一条边的贡献是\(\binom{n}{k} - \binom{a}{k ...

  7. 认识loadrunner及相关性能参数

    认识loadrunner及相关性能参数 LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够对整 ...

  8. LoadRunner FAQ

    LoadRunner FAQ web_concurrent_start和web_concurrent_end web_concurrent_start 语法: int web_concurrent_s ...

  9. nodejs 项目,请求返回Invalid Host header问题

    今天在linux上安装node,使用node做一个web服务器,在linux上安装各种依赖以后开始运行但是,出现了:Invalid Host header 的样式,在浏览器调试中发现是node返回的错 ...

  10. bzoj 1264 [AHOI2006]基因匹配Match dp + 树状数组

    思路:好难想啊, 考虑到应该从每个数字只有5个数字下手, 但是不知道到底该怎么写.. 首先我们将第一个串按数字的种类分类, 每一类里面有5个, 然后将第二个串里面的数字一个一个加,如果一个加入的第 i ...