React Native从零到一搭建开发环境

ReactNative环境搭建

  • 安装Homebrew
  • 安装rvm
  • 安装nvm
  • 安装node
  • 安装react-native-cli
  • 安装watchman

iOS

  • 安装xcode
  • 安装ruby
  • 安装cocoaPods

Android

  • 安装jdk
  • 安装 Android Studio

1、Xcode

直接在App Store下载即可

2、RVM

安装命令:

$ curl -L https://get.rvm.io | bash -s stable

注意: 安装RVM前需要你先安装好Xcode环境

期间可能会问你sudo管理员密码,以及自动通过homebrew安装依赖包,等待一段时间后就可以成功安装好RVM

载入RVM环境(新开 Termal 就不用这么做了,会自动重新载入的)

$ source ~/.rvm/scripts/rvm

检查一下是否安装正确

$ rvm -v

2.1 用RVM安装Ruby环境

列出已知的ruby版本

$ rvm list known

可以选择现有的rvm版本来进行安装(下面以ruby 2.3.3版本的安装为例)
$ rvm install 2.3.3

等待下载,编译过程,完成以后,Ruby, Ruby Gems 就安装好了

注意: 如果之前没有安装过Homebrew, 则上面的安装命令 rvm install xxx 会自动帮忙安装Homebrew

2.2Ruby版本设置

将该版本的Ruby设置为系统默认版本

$ rvm 2.3.3 --default

这个时候你可以测试是否正确

img

2.3替换源

Ruby的默认源使用的是cocoapods.org,国内访问这个网址有时候会有问题,网上的一种解决方案是将远替换成淘宝的,替换方式如下:

$ gem source -r https://rubygems.org/

$ gem source -a https://ruby.taobao.org

想验证是否替换成功了,可以执行:

$ gem sources -l

替换成功后的输出结果:

 CURRENT SOURCES            
 http://ruby.taobao.org/ 

到这里就已经把Ruby环境安装成功

3、cocoaPods

安装命令:

$ sudo gem install -n /usr/local/bin cocoapods

当显示下面的 gems installed 再进行下一步操作

img

当上一步安装成功后,在终端中输入如下命令:

$ pod setup

这个过程可能比较漫长,需要20+分钟的时间,需要耐心的等待安装完成,当出现Setup completed的时候说明pod已经安装成功了,后面就可以使用pod了

CocoaPods的使用

我们输入下面的命令来尝试搜索一个三方库试试能否搜索出结果:

$ pod search AFNetworking

当出现下面的结果表示我们安装的pod是可以正常使用了

img

4、Homebrew

Homebrew是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,相当于linux下的apt-get、yum神器;Homebre可以在Mac上安装一些OS X没有的UNIX工具,Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接

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

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

当显示 Installation successful 表示安装成功

img

brew如何使用

  • 安装软件,如:$ brew install oclint
  • 卸载软件,如:$ brew uninstall oclint
  • 搜索软件,如:$ brew search oclint
  • 更新软件,如:$ brew upgrade oclint
  • 查看安装列表, 如:$ brew list
  • 更新Homebrew,如:$ brew update

5、nvm

目前主流的node版本管理工具有两种,nvm和n,下面我们就以nvm来管理我的node

5.1 安装

安装命令:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

下载完成后nvm就被安装在了~/.nvm下

5. 2设置环境变量

  • 如果你也使用了zsh的话,就需要在~/.zshrc这个配置文件中配置
  • 如果使用brew安装的nvm,需要在 ~/.bashrc文件中修改
  • 否则就找找看/.bash_profile或者/.profile中修改

打开 ~/.zshrc

$ open $HOME/ .zshrc

在最后一行加上下面两行代码

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

这一步的作用是每次新打开一个bash,nvm都会被自动添加到环境变量中了

完成后输入下面命令重新启动一下配置

$ source ~/.zshrc

终端输入nvm可以看到如下信息,即表示nvm安装成功:

$ nvm

img

6、node

这里安装nodejs我们建议使用nvm来安装和管理node版本

使用nvm ls-remote查看一下有哪些node版本可以被安装

$ nvm ls-remote

img

安装node,现在我们以8.9.4的版本号为例,目前weex中使用的也是8.9.4版本

$ nvm install v8.9.4

通过nvm ls命令查看当前已安装好的所有node版本,这里我安装了两个node版本,一个6.5.0,一个8.9.4,这两个版本号后面可以任意切换使用

$ nvm ls

img

接下来我们可以使用nvm use <version>来切换node版本

$ nvm use v8.9.4

img

注意:这时如果你新打开一个bash,输入nvm current会发现显示为null,这是因为使用nvm use命令只会在当前bash里生效,重新打开一个bash你会发现$PATH的值已经不包含刚才的node目录了,要解决这个问题也很简单,使用nvm alias default <version>命令来指定一个默认的node版本就行了,这里我使用了v8.9.4作为默认版本:

$ nvm alias default v8.9.4

img

到此,node环境就搭建完毕了

7、react-native-cli

全局安装react-native 指令
安装命令:

$ npm install -g yarn react-native-cli

8、Watchman

安装命令:

$ brew install watchman

9、JDK

去JDK官网下载安装即可

官方下载地址

img

10、android Studio

Android开发工具,直接网上下载即可

参考教程

创建项目

初始化创建一个项目并运行项目分两步:

  • 创建项目
  • 运行项目

10.1 创建项目

React Native 创建项目非常简单,我们只需要输入下面的命令即可创建一个React Native 项目

$ react-native init ReactNativeDemo

10.2 运行项目

运行项目也有两种方式:

  • $ react-native run-ios
  • $ npm start

10.2.1 react-native run-ios

等项目创建完成后,我们执行 cd ReactNativeDemo 进入到项目根目录(有packjson文件的目录即为项目根目录),然后执行下面的命令即可开启一个npm 服务并启动模拟器运行iOS平台项目

$ react-native run-ios

项目运行成功效果如图:

img

10.2.2 npm start

当然,我们也可以先开启一个npm服务,先执行$ cd ReactNativeDemo 进入项目根目录,然后执行 $ npm start 命令来开启一个npm 服务

npm 服务启动成功如下图:

img

服务启动成功后,我们打开Xcode工程,直接运行模拟器即可

img

运行成功效果图:

img

更多文章

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

推荐阅读更多精彩内容