React-Native尝鲜计划－环境搭建及 hello world

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 看结果。也可以自己做些研究了，下篇文章研究react-native的场景切换。－>《react－native：场景切换》

更多相关文章

随机推荐