本文的前提是你已经配置好了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是开源的,所以先打开项目的地址
步骤一 下载项目并配置项目依赖
- 下载项目,本地会生成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。
运行效果图如下
这里我们可以看到各种几乎与原生UI一致的效果以及用户体验,比如ProgressBar(进度是动态的,这里截图是静态的)
其他更多UI的效果以及体验需要大家自己去查看。