通过示例程序可以看到一些基本组件的使用,对于学习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的更多相关文章

  1. Arduino+ESP32 之 驱动GC9A01圆形LCD(二),移植LVGL,跑示例程序,显示自制图片

    在前文Arduino+ESP32 之 驱动GC9A01圆形LCD(一), 我们已经移植好了arduino GFX库, 该库的示例程序内,还有LVGL的示例程序哦. arduino环境下移植lvgl是很 ...

  2. .NET跨平台:在Ubuntu上用自己编译的dnx运行ASP.NET 5示例程序

    在 Linux Ubuntu 上成功编译 dnx 之后,会在 artifacts/build/ 文件夹中生成 dnx-coreclr-linux-x64/ 与 dnx-mono/ 这2个文件夹,前者是 ...

  3. .NET跨平台:在CentOS上编译dnx并运行ASP.NET 5示例程序

    在之前的博文中我们在 Ubuntu 上成功编译出了 dnx ,并且用它成功运行了 ASP.NET 5 示例程序.在这篇博文中我们将 Ubuntu 换成 CentOS. 目前 dnx 的编译需要用到 m ...

  4. 单独编译IMX6Q的VPU示例程序:mxc_vpu_test.out

    mxc_vpu_test.out是飞思卡尔为IMX6Q编写的VPU示例程序,有编解码和简单的网络传输功能. 首先从/opt/freescale/pkgs/中提取出imx-test-3.0.35-4.1 ...

  5. FFmpeg示例程序合集-批量编译脚本

    此前做了一系列有关FFmpeg的示例程序,组成了<最简单的FFmpeg示例程序合集>,其中包含了如下项目:simplest ffmpeg player:                   ...

  6. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

  7. DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...

  8. DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

  9. DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

随机推荐

  1. 求助,eclipse总是卡在building workspace-CSDN论坛

    1).解决方法 方法1.修改eclipse启动文件 eclipse.ini 中添加启动参数参数: -vmargs -Xmx512m 方法2.关闭自动构建工作区: project -> build ...

  2. Extjs 窗体居中,双重窗体弹出时清除父窗体的鼠标事件

    这个是监控窗体缩放的事件 缩放中居中主要在 'beforeshow' 和 'destroy'两个事件里面监控 var EditTempWindow; Ext.EventManager.onWindow ...

  3. 最短的数字判断代码 js

    转自  http://www.cnblogs.com/snandy/p/3590186.html 我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是nu ...

  4. 初识orcl

    一.介绍基本数据库的端口号. SQLServer                  端口号:1433 MySql                          端口号:3306 Oracle    ...

  5. CSS3里的display

    默认值:inline 适用于:所有元素 继承性:无 动画性:否 none: 隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline: 指定对象为内联元 ...

  6. jQuery原型方法first,last,eq,slice源码分析

    这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是 ...

  7. TI的DSP、ST的ARM、Intel的X86浮点性能对比

    估计没什么价值,单纯地记录下时间,以便以后查看.   TMS320F28335 STM32f030 i3 4170 i3 4170 主频 150MHz 48MHz 3.7GHZ 3.7GHZ IDE ...

  8. JavaScript MVC框架和语言总结[infoq]

    infoq关于javascript的语言和框架的总结,非常全面,值得一读. http://www.infoq.com/minibooks/emag-javascript Contents of the ...

  9. 什么时候用Application的Context,什么时候用Activity的Context

    单例模式用application的context 如果我们在Activity A中或者其他地方使用Foo.getInstance()时,我们总是会顺手写一个『this』或者『mContext』(这个变 ...

  10. Android实现登录

    登录界面布局文件         1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...