转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50546194

本文出自:【江清清的博客】

(一)前言

         特别说明:本系列专题文章的系统环境是OS X,如果各位童鞋是Windows的话，出现运行安装等坑爹问题，还得重新排查解决哦~俗话说学习一样新东西的时候，例如这边我们要学React Native的组件使用，那么最好的学习资料就是官方提供的材料了，作作为开发人员最好的学习资料就是源码，幸好官方给我们提供了UIExplorer项目，这里边包含React Native的基本所有组件的使用介绍和方法。下面我们来把该项目进行运行起来，不过这边只暂时使用到Android项目哦~ iOS的部分后期在进行讲解吧。请谅解哦~

         刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)运行APP工作

          2.1.React Native项目源码下载

       React Native项目官方地址:https://github.com/非死book/react-native  我们可以使用如下命令把代码clone到本地。

git clone https://github.com/非死book/react-native.git

具体项目结构如下:

       2.2.Android环境要求如下，请确保你的环境已经达到如下要求:

          ①.Android Sdk版本23(在build.gradle中的compileSdkVersion)

          ②.SDK build tools version23.0.1(build.gradle中buildToolsVersion)

          ③.Android Support Repository>=17

          ④·Andoid NDK需要安装好

[注]以上第①点到第③点的版本不需要和我这边一样，可以根据实际情况走，不过最好是最新版本哦~

       2.3.下面开始下载NDK以及配置

        ①.去官网下载NDK项目(注意KX上网):http://developer.android.com/ndk/dowloads/index.html

我的系统是OS X，所以下载了Mac 版本NDK了(NDK项目名:android-ndk-r10e-darwin-x86_64.bin)。

然后切换到该NDK文件所在目录运行如下命令进行改变权限以及解压缩即可了。

chmod a+x android-ndk-r10e-darwin-x86_64.bin

接着运行解压缩命令,进行解压缩NDK

./android-ndk-r10e-darwin-x86_64.bin

    2.4.react-native项目中添加local.properties文件，其中配置一下Android SDK和Android NDK的路径即可。

我们在clone出来的react-native项目的根目录创建local.properties文件，文件中添加信息如下:

[注]以上里面的路径信息根据我本机的路径走得，实际情况还要看各位的SDK和NDK的路径。

   2.5.添加Node依赖模块:该命令行需要切到react-native项目中,主要运行如下命令

cd react-native

以及

npm install

这样就添加了Node_Modules模块(其中包含了react-native核心库)

   2.6.运行相应Demo(这边主要演示UIExplorer项目，其他项目运行方法相似)

以上的步骤大家如果已经全部走完了之后，下面运行如下命令进行编译安装即可:

./gradlew :Example:UIExplorer:android:app:installDebug

接着运行如下命令带起服务器,然后点击打开模拟器中的APP

./packager/packager.sh

最终运行效果如下:

        上面我们完成了react-native基础UI组件实例项目的运行,对于其他Demo，例如Movies，其实方法差不多的，大家可以测试一下，举例如下:

./gradlew :Examples:Movies:android:app:installDebug

(三)最后总结

          今天我们主要给大家介绍了运行react-native项目中实例项目，例如UIExplorer项目，该里面包含了基本所有的组件的使用方式，而且介绍的非常详细对于初学者来说，就是很好的学习入门的知识，也希望大家都能部署调试起来。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。 

       尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

     关注我的微博，可以获得更多精彩内容