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

前端之家收集整理的这篇文章主要介绍了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相关文章