环境配置:React Native 开发环境配置 For Android

React Native 是FaceBook开源的一个项目,FaceBook希望可以用写 Web App 的方式去写 Native App。它可以让我们用JS和React来开发应用,使用React Native可以通吃Android 和 IOS ,以及Web,仅仅需要一份业务逻辑代码就可以来创建我们的应用。

起源

React Native 是由 React 衍生出来的,而 React 起源于 Facebook 的内部项目,因为FaceBook对市场上所有 JavaScript MVC 框架,都不太满意,就决定自己写一套,用来架设自己的 Instagram 的网站。等做出来以后,发现这套东西很不错,而且好用,就在2013年5月开源了。

而衍生的 React Native 项目,希望用写 Web App 的方式去写 Native App。这样同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机上。FaceBook最早发布的关于React Native是针对IOS的,而React Native for Android是在去年也就是2015年9月15日开源发布的。现阶段React Native的体验虽然已经很不错了,只能说很接近原生应用,但是还是不能达到Native App的体验。所以它很火,将来的事,我们将来说,但是目前已经非常火了,多门技术,多条路。我们也应该学学了。

环境搭建

因为我用的是macbook,所以这次环境搭建是根据mac电脑来说的,不过大家放心,针对windows电脑的环境搭建,我会分享给大家一篇文章或者视频的,不会忘了你们的。

Homebrew安装

Homebrew是一款自由及开放源代码的软件包管理系统,用以简化Mac OS X系统上的软件安装过程,Homebrew以Ruby语言写成,针对于Mac OS X操作系统自带Ruby的版本。默认安装在/usr/local,由一个核心git版本库构成,以使用户能更新Homebrew。是 OS X 不可或缺的套件管理器。
安装之前,你可以先检查一下电脑上是否已经安装了Homebrew,检查方式如下:
在终端执行下列命令:

brew -v

如果已经安装了,就像下图一样,显示版本号。



如果没有安装,那就可以用下面这种方式,进行安装,在终端上直接输入下面的命令即可:

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

Node.js的安装

Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。我们都知道React Native是需要使用js开发的,所以Node.js是必不可少的安装。

安装Node.js也很简单,如下:

nvm install node && nvm alias default node

可能你发现了,在Terminal终端上使用的命令是nvm,如果你没有安装nvm是会提示command not found的,所以我们还得先安装nvm。
nvm 是 Node.js 的版本管理器,可以轻松安装各个版本的 Node.js 版本。安装方式如下:
我们可以通过Homebrew安装:

brew install nvm

或者通过这里的方式安装,地址:https://github.com/creationix/nvm#installation

安装完了nvm,我们这里最好配置一下环境变量到.bash_profile文件,因为如果不配置的话,容易出现这个错误nvm command not found
配置方式如下:

export NVM_DIR="/Users/loonggg/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

检查是否安装好了node和nvm我们可以通过如下方式:

bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3

安装watchman 和 flow

  • Watchman 是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。
  • flow是一个Javascript静态类型检查器。Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量。

安装方式如下:

brew install watchman
brew install flow

安装React Native

我们使用npm进行安装,如下:

npm install -g react-native-cli

安装完React Native之后,要想运行或者初始化一个项目,然后运行到模拟器或者真机,我们需要搭建一个Android或者ios开发环境,我这里只介绍android,相信想学习React Native的同学,电脑上都基本上有了Android的开发环境。但是可能会有坑,有一个大坑就是得配置SDK的环境变量:ANDROID_HOME。

SDK环境变量的配置

  1. 启动Terminal终端工具
  2. 输入cd ~/ 进入当前用户的home目录
  3. 创建:
touch .bash_profile
  1. 打开并编辑:
open .bash_profile
  1. 在文件中写入以下内容:export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools
    友情提示:上述路径,请换成自己电脑上的SDK所在路径
  2. 执行如下命令:
source .bash_profile 
  1. 验证:输入adb回车。如果未显示command not found,说明此命令有效,环境便亮设置完成。

创建我们的第一个React Native应用

初始化项目

react-native init AwesomeProject

上面的AwesomeProject这个项目名字,你可以自己随意定义,自己命名,没有限制。

运行项目

  • 切换到AwesomeProject的主目录
  • 运行项目命令
react-native run-android
  • 我们使用编辑器打开和修改index.android.js文件,调出模拟器菜单键,选择重新载入 js 即可看到变化。
    启动后,模拟器效果图:

到这里我们就把环境配置讲完了,关于windows上的安装,我会给大家发篇资料或者视频的。

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

推荐阅读更多精彩内容