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

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

React Native从零到一搭建开发环境_第1张图片
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 再进行下一步操作

React Native从零到一搭建开发环境_第2张图片
img

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

$ pod setup

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

CocoaPods的使用

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

$ pod search AFNetworking

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

React Native从零到一搭建开发环境_第3张图片
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 表示安装成功

React Native从零到一搭建开发环境_第4张图片
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

React Native从零到一搭建开发环境_第5张图片
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

React Native从零到一搭建开发环境_第6张图片
img

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

$ nvm use v8.9.4

React Native从零到一搭建开发环境_第7张图片
img

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

$ nvm alias default v8.9.4

React Native从零到一搭建开发环境_第8张图片
img

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

7、react-native-cli

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

$ npm install -g yarn react-native-cli

8、Watchman

安装命令:

$ brew install watchman

9、JDK

去JDK官网下载安装即可

官方下载地址

React Native从零到一搭建开发环境_第9张图片
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

项目运行成功效果如图:

React Native从零到一搭建开发环境_第10张图片
img

10.2.2 npm start

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

npm 服务启动成功如下图:

React Native从零到一搭建开发环境_第11张图片
img

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

React Native从零到一搭建开发环境_第12张图片
img

运行成功效果图:

React Native从零到一搭建开发环境_第13张图片
img

更多文章

  • 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!

小伙伴们扫下方二维码加入RN技术交流QQ群

React Native从零到一搭建开发环境_第14张图片
QQ群二维码,500+ RN工程师在等你加入哦

你可能感兴趣的:(React Native从零到一搭建开发环境)