转载

如何编译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 Nativecompile '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真是不厚道为什么不提供编译好的程序看一下想过呢)。