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 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...