说明
本文主要介绍如何编译并运行React Native的官方DEMO。对于一门新的技术或者语言而言,了解它最直接、最简单的方式就是查看官方提供的DEMO,首先因为它介绍每个组件、API等用法都是比较简单的示例,不会像开源项目一样需要去阅读大量的代码,其次官方的DEMO也是最具有权威性。
前言
React Native是一种解决方案,使用React去开发一个原生的APP,官方的描述是这样的
A framework for building native apps with React.
- 英文官方地址
- 中文官方地址
- 学习指南
- 几种IDE比较及其他相关需要的知识(React.js、Node.js)
- Node.js菜鸟教程
- React.js中文官方网址
正题
看完了上面的介绍,下面让我们进入本篇文章的正题,我们知道React Native在Github是开源的,所以先打开项目的地址
步骤一 下载项目并配置项目依赖
- 下载项目,本地会生成react-native文件夹
git clone
- 命令行进入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的效果以及体验需要大家自己去查看。