如何编译ReactNative示例程序Examples
通过示例程序可以看到一些基本组件的使用,对于学习ReactNative是很有帮助的。
编译示例程序需要将整个项目导入到androidStudio中,androidStudio导入项目时选择react-native/ReactAndroid目录。
由于项目依赖ndk因此如果要编译Examples还需要安装配置ndk目录,下载ndk后是一个自解压程序,会释放ndk的目录。
然后需要设置环境变量或者在react-native根目录下新建local.properties文件,文件内容如下:
sdk.dir=c:\你的sdk目录
ndk.dir=c:\你的ndk目录
设置要之后就可以编译了,导入和编译的过程比较曲折,请继续看下文。
在编译AwesomeProject项目时,没有用到ndk,实际上这里的ndk默认情况下并没有用到,只是gradle的设置里有ndk因此必须配置ndk才能导入项目。
ndk是在编译核心库是才用到,核心库位于react-native/ReactAndroid,导入整个项目时以lib形式存在。
查看Examples目录下UIExplorer,会发现在build.gradle是以在线的方式导入核心库的。通过源码的方式导入被注释掉了。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
// Depend on pre-built React Native
compile 'com.facebook.react:react-native:0.11.+'
// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
// compile project(':ReactAndroid')
}
由此可知,编译UIExplorer并不需要ndk,如果你不想设置ndk,有2个办法
1.拷贝AwesomeProject项目中的build.gradle,settings.gradle到UIExplorer的android目录,在导入项目时选择UIExplorer/android就可以了,这样androidStudio会导入单个项目,否则会导入整个项目。
2.用androidStudio新建一个同名的项目,然后把UIExplorer目录中的文件拷贝到新建的项目中。
编译好之后启动服务器端,到react-native目录下执行:
npm install
node packager\packager.js
windows下如果出现错误需要根据错误提示修改代码
http://www.cnblogs.com/zhaojietec/p/4853273.html
不过需要注意的是,目前为止,UIExplorer在Android下有一个bug,IOS下没有问题,通过google可以找到了解决办法。
https://github.com/facebook/react-native/issues/2855
原因是,js代码和android原生代码不同步,通过build.gradle可以看到android下的引用的reactNative核心库为11,而js代码版本已经更新到12了。
解决的办法有2个,一个是使用git工具(如smartGit),将js代码恢复到之前的版本,另一个办法是重新编译reactNative的核心库,编译核心库需要ndk,在mac下没有问题,在windows编译会出错。
编译reactNative核心库,对UIExplorer下注释掉的依赖项进行修改即可,编译速度较慢 需要在线下载第三方依赖库。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
// Depend on pre-built React Native
//compile 'com.facebook.react:react-native:0.11.+'
// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
compile project(':ReactAndroid')
}
由于windows下无法编译,所以这里提供编译好的aar文件,修改UIExplorer build.gradle中的依赖项就可以了。至于如何引入aar文件,可以自行搜索。
当然mac下同样也可以用这个aar,可以省去不少麻烦。
网盘下载地址(需要密码):
链接:http://share.weiyun.com/f4460735f3b44a4e79ddc7032d6f95f7
由于本人刚建的微信公众号还没有人关注,因此请关注我的微信公众号:zhaojieTec,回复“aar”后获取密码。
是的,你没有看错,这就是传说中的隐藏内容请回复查看。
另外网盘中也提供编译好的loader程序,UIExplorer (ps:facebook真是不厚道为什么不提供编译好的程序看一下效果呢)。
如何编译ReactNative示例程序Examples的更多相关文章
- Arduino+ESP32 之 驱动GC9A01圆形LCD(二),移植LVGL,跑示例程序,显示自制图片
在前文Arduino+ESP32 之 驱动GC9A01圆形LCD(一), 我们已经移植好了arduino GFX库, 该库的示例程序内,还有LVGL的示例程序哦. arduino环境下移植lvgl是很 ...
- .NET跨平台:在Ubuntu上用自己编译的dnx运行ASP.NET 5示例程序
在 Linux Ubuntu 上成功编译 dnx 之后,会在 artifacts/build/ 文件夹中生成 dnx-coreclr-linux-x64/ 与 dnx-mono/ 这2个文件夹,前者是 ...
- .NET跨平台:在CentOS上编译dnx并运行ASP.NET 5示例程序
在之前的博文中我们在 Ubuntu 上成功编译出了 dnx ,并且用它成功运行了 ASP.NET 5 示例程序.在这篇博文中我们将 Ubuntu 换成 CentOS. 目前 dnx 的编译需要用到 m ...
- 单独编译IMX6Q的VPU示例程序:mxc_vpu_test.out
mxc_vpu_test.out是飞思卡尔为IMX6Q编写的VPU示例程序,有编解码和简单的网络传输功能. 首先从/opt/freescale/pkgs/中提取出imx-test-3.0.35-4.1 ...
- FFmpeg示例程序合集-批量编译脚本
此前做了一系列有关FFmpeg的示例程序,组成了<最简单的FFmpeg示例程序合集>,其中包含了如下项目:simplest ffmpeg player: ...
- 通过Jexus 部署 dotnetcore版本MusicStore 示例程序
ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...
- DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...
- DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
随机推荐
- Oracle 数据库基础学习 (四) group by的使用
group by分组查询 示例:要求查询出每个部门的编号,人数,以及最高和最低工资 select deptno, count(empno), max(sal), min(sal) from em ...
- [moka同学笔记]Yii2中多表关联查询(join、joinwith) (摘录)
表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name cu ...
- GJM: Unity3D基于Socket通讯例子 [转载]
首先创建一个C# 控制台应用程序, 直接服务器端代码丢进去,然后再到Unity 里面建立一个工程,把客户端代码挂到相机上,运行服务端,再运行客户端. 高手勿喷!~! 完全源码已经奉上,大家开始研究吧! ...
- ServletContext与网站计数器
什么是ServletContext? ServletContext是服务器的一个公用的空间,是不同的浏览器共享的一个数据. 由图可以看出ServletContext和Cookie与session之间的 ...
- javascript数据类型理解整理
起因:关于数据类型这块,自己看了很多遍相关的资料,每次查看和实践都有一些体会和理解:但又感到没有理解透,总是差一点,最近又在看这块的内容,加上最近的积累,做个相关笔记 ECMAScript数据类型:1 ...
- JS高程2.在HTML中使用Javascript(1)
1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...
- 轻松掌握:JavaScript享元模式
享元模式 在JavaScript中,浏览器特别是移动端的浏览器分配的内存很有限,如何节省内存就成了一件非常有意义的事情.节省内存的一个有效方法是减少对象的数量. 享元模式(Flyweight),运行共 ...
- 【原】iOS动态性(二):运行时runtime初探(强制获取并修改私有变量,强制增加及修改私有方法等)
OC是运行时语言,只有在程序运行时,才会去确定对象的类型,并调用类与对象相应的方法.利用runtime机制让我们可以在程序运行时动态修改类.对象中的所有属性.方法,就算是私有方法以及私有属性都是可以动 ...
- Request.MapPath和ServerMapPath
一.路径 / 念 反斜杠,/ 是超文本协议的路径分隔符号,所有的网站在浏览器中显示的路径分隔都是以"/"表示.它一般代表虚拟路径. \ 念 斜杠,在普通程序代码中则以"\ ...
- 浅析css布局模型2
上节对整个布局模型进行了概述,这节先谈一下布局模型的几个属性. z-index属性 该属性是检索或设置对象的层叠顺序,默认值为auto,遵循其父对象的定位. 并级的对象,该属性的值越大,则被层叠在最上 ...