[React Native]UIExplorer

本文的前提是你已经配置好了React Native的环境，还不熟悉的朋友请先移步这里。

说明

本文主要介绍如何编译并运行React Native的官方DEMO。对于一门新的技术或者语言而言，了解它最直接、最简单的方式就是查看官方提供的DEMO，首先因为它介绍每个组件、API等用法都是比较简单的示例，不会像开源项目一样需要去阅读大量的代码，其次官方的DEMO也是最具有权威性。

前言

React Native是一种解决方案，使用React去开发一个原生的APP，官方的描述是这样的

A framework for building native apps with React.

这里提到了React，它是一个目前最热门的前端框架，React Native是基于React的，所以建议大家学习，更多的信息请查看这里。这里也为大家整理了几个学习React Native的资料

• http://facebook.github.io/react-native/ 英文官方地址
• http://reactnative.cn/ 中文官方地址
• https://github.com/ele828/react-native-guide 学习指南
• http://blog.csdn.net/yuanguozhengjust/article/details/50468561 几种IDE比较及其他相关需要的知识（React.js、Node.js）
• http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js菜鸟教程
• http://reactjs.cn/ React.js中文官方网址

正题

看完了上面的介绍，下面让我们进入本篇文章的正题，我们知道React Native在Github是开源的，所以先打开项目的地址

https://github.com/facebook/react-native

步骤一 下载项目并配置项目依赖

• 下载项目，本地会生成react-native文件夹
  git clone https://github.com/facebook/react-native.git

• 命令行进入react-native文件夹，并执行npm install (npm是一种js的依赖包管理）
  cd react-native && npm install

步骤二 运行examples(Android，以UIExplorer为例)

• 编译并运行UIExplorer
  gradlew :Examples:Movies:android:app:installDebug

• 启动packager
  cd packager && packager.sh

备注：确保你的手机和电脑处在同一个局域网内，打开安装好的UIExplorer App，请点击Menu->Dev Settings->DEBUGGING->Debug server host & port for device菜单，设置电脑所在的局域网地址和端口号，端口号默认是8081。

运行效果图如下

Paste_Image.png

这里我们可以看到各种几乎与原生UI一致的效果以及用户体验，比如ProgressBar（进度是动态的，这里截图是静态的）

Paste_Image.png

其他更多UI的效果以及体验需要大家自己去查看。