React Native 刚被 Face Book 开源不久,持续引起关注。“learn once,write anywhere” 是每个开发者的追求。目前国内关于 react native 学习资料不多,为了尝鲜,从本篇我文章开始,我决定来学习React-Native。目前 React 支持 Android 和 iOS 的跨平台开发,这系列文章都将以 Android 为主要阵地,既然是跨平台,其实是大同小异的。本章主要学习两部分内容:一、 环境搭建,二、运行第一个 demo 页面:hello world。
- 环境搭建
首先要说明的是:目前只支持在 mac OS 下搭建开发环境,windows 和 linux 后续必然也会支持,相信很快就会更新,请关注官网(跳墙)
1 安装 Android 环境。
关于 Android 环境的安装,本文就不在重复了,网上太多文章介绍了,建议直接看 google 官网,或者私聊我。
2 安装 nvm,Node.js,watchman ,flow
启动终端依次输入以下命令:
brew install nvm成功安装nvm。
brew install watchman等待一段时间,成功安装 watchman。
brew install flow 等待一一段时间,成功安装 flow。
nvm install node 等待一段时间,成功安装node.js。
3 安装 React-native-cli
npm install -g react-native-cli 如果顺利至此,React-Native 的环境搭建完成了。
- demo -hello world
有点类似 cocos 2d ,我们需要用命令去初始化项目。
react-native init AwesomeProject
这个过程需要一些时间,会在你当前目录下生成一个名为AwesomeProject 的 react-native 工程目录。目录结构如下:
其中 android 文件夹 是 AndroidStudio 工程项目,ios 目录是 XCode 工程目录,另外还包含了 react-native 提供的库。
进入目录:
cd AwesomeProject 运行项目:
react-native run-android 第一次运行会有点慢,会去下载安装gradle。
你会看到两个终端界面:
说明 JS server 在 8081 端口成功启动。
说明 Android 编译成功,并安装到手机。
注意:这个命令实际上做了两件事:
1 使用 gradle 编译 android 工程,并安装到你当前链接的调试机或模拟器。(你也可以使用 AndroidStudio 去编译)
2 启动 js server (也就是说,我们页面可以在server 端编辑,client 端加载更新)
如果你成功启动项目,出现这个界面:
说明你没成功连上 Js Server,你摇一摇手机,弹出菜单,选择 Dev Setting-》选择Debug server host & port-》输入你的IP ,和 js server的端口号(冒号隔开)。
然后在摇一摇,选择 Reload Js。
看到这个页面,说明你成功了。 这里绘制的内容,其实就来自工程目录下的 index.android.js 文件。你可以修改里面的内容,然后 reload 看结果。也可以自己做些研究了,下篇文章我接下研究如何加载网络上的数据并显示出来。