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
这个时候你可以测试是否正确
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
再进行下一步操作
当上一步安装成功后,在终端中输入如下命令:
$ pod setup
这个过程可能比较漫长,需要20+分钟的时间,需要耐心的等待安装完成,当出现Setup completed
的时候说明pod已经安装成功了,后面就可以使用pod了
CocoaPods的使用
我们输入下面的命令来尝试搜索一个三方库试试能否搜索出结果:
$ pod search AFNetworking
当出现下面的结果表示我们安装的pod是可以正常使用了
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
表示安装成功
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
6、node
这里安装nodejs我们建议使用nvm来安装和管理node版本
使用nvm ls-remote
查看一下有哪些node版本可以被安装
$ nvm ls-remote
安装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
接下来我们可以使用nvm use
来切换node版本
$ nvm use v8.9.4
注意:这时如果你新打开一个bash,输入nvm current会发现显示为null,这是因为使用nvm use命令只会在当前bash里生效,重新打开一个bash你会发现$PATH的值已经不包含刚才的node目录了,要解决这个问题也很简单,使用nvm alias default
命令来指定一个默认的node版本就行了,这里我使用了v8.9.4作为默认版本:
$ nvm alias default v8.9.4
到此,node环境就搭建完毕了
7、react-native-cli
全局安装react-native
指令 安装命令:
$ npm install -g yarn react-native-cli
8、Watchman
安装命令:
$ brew install watchman
9、JDK
去JDK官网下载安装即可
官方下载地址
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
项目运行成功效果如图:
10.2.2 npm start
当然,我们也可以先开启一个npm服务,先执行$ cd ReactNativeDemo
进入项目根目录,然后执行 $ npm start
命令来开启一个npm 服务
npm 服务启动成功如下图:
服务启动成功后,我们打开Xcode工程,直接运行模拟器即可
运行成功效果图:
小福利
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):github.com/guangqiang-…:欢迎小伙伴们 star
- 作者简书主页:包含60多篇RN开发相关的技术文章www.jianshu.com/u/023338566… 欢迎小伙伴们:多多关注,多多点赞
- 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
- 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!