React Native搭建开发环境、编写Hello World

简述

为了避免Android平台和IOS平台的重复开发,对于性能要求不太高的应用可以采用React Native进行开发,以减少开发成本,这里就简单介绍一下React Native的开发环境搭建。(以Mac为例

必须安装的软件

因为React Native离不开JavaScript,不管是Android还是IOS都需要安装以下软件

Homebrew

Homebrew是Mac系统的包管理器,安装的目的是方便安装Node等其他的软件

安装方法:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Tips:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node

使用刚刚安装的Homebrew来安装Node(React Native目前需要NodeJS5.0或者更高版本)

安装方法:

brew install node

安装完以后建议设置npm镜像以加速

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替换npm的工具,可以加速node模块的下载

react-native-cli用于完成创建项目、初始化、运行、更新、打包等任务

安装方法:

brew install node

Tips:如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

Android需要做的

配置ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中

如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。

export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效(否则重启后才生效):

source ~/.bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

$ echo $ANDROID_HOME
~/Library/Android/sdk

Android Studio

需要Android Studio2.0或更高版本
。。。。。。
安装教程略过

安装Android Studio只有一个目的:使用Android模拟器,当然使用Genymotion也是可以的,用真机当然更好了。

IOS需要做的

Apple大法好,Apple就是吊,IOS要做的很简单,打开App Store,安装Xcode,然后就咩有然后了,开干。

推荐安装的软件

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新),总之就是为了更快。

brew install watchman

其实还有很多工具例如:Flow、Nuclide等,但是没那么常用,像Flow入门较麻烦,就不说了。我们常用WebStorm或Sublime Text就行了。

Nuclide,这个要说一下,由于RN开发主要是编写JS代码,我们使用自己顺手的工具就好,但是程序编译、打包都需要敲命令行完成,所以Nuclide就是为了解决这个问而生的,但是目前只是基于Atom的一个插件,使用Nuclide之前必须安装Atom,效果不是很好,但是相信FB会把它越做越好吧,就像Android Studio之于Eclipse。

测试安装

重点来了,忙了半天,试试行不行。

react-native init MyApp
cd MyApp

这两步走完,项目已经创建好了,并且已经切换到项目目录。
接下来打开Android和IOS的模拟器,运行项目就行了

Android

react-native run-android

IOS

react-native run-ios

如下图

WX20161221-143954.png

出Hello World

修改index.android.js和index.ios.js,增加Android和IOS<Text>标签
如下图

WX20161221-144824.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容