Mac平台搭建React Native开发环境

🍎React Native是一个使用React来编写原生移动应用的框架。他有如下优点:1.使用JavaScript和React编写原生移动应用。2.React Native应用是真正的移动的应用。3.可以快速迭代开发应用。4.完美兼容使用Objecttive-C,Java或是Swift编写的组件。这篇文章就简单介绍一下在Mac平台上搭建React Native开发环境。

工具安装

代理配置

我使用的是iterm2 + Oh My Zsh作为终端,具体的安装步骤可以谷歌。

代理配置:

  • 在终端中输入这个代码
1
vi ~/.zshrc
  • 在vim中按下键盘字母i,在最后面粘贴下面代码
1
2
3
4
5
6
7
8
9
10
11
12
#proxy
proxy () {
export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"
echo "HTTP Proxy on"
}
#noproxy
noproxy () {
unset http_proxy
unset https_proxy
echo "HTTP Proxy off"
}

上面代码表示,需要让终端走代理时,先输入proxy打开代理;输入noproxy关闭代理。

  • 按下esc,再输入:wq保存并退出。
  • 终端中输入
1
source ~/.zshrc

Homebrew

Homebrew是一款macos上软件包的管理器。在终端中执行下面这句代码即可安装。

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

Xcode

Xcode是一款用来编写mac和ios应用的编辑器。并且只能在mac机子上使用。

安装:在Mac上的App Store上进行安装

Webstorm、VS Code

Webstorm、VS Code是用来编写JavaScript代码的工具

安装:

Android Studio

Android Studio使用来编写原生安卓的编辑器,与Webstorm来自同一个公司。不过Android Studio是免费的。

安装:Android Studio

开始安装

React Native官网上提供了两种安装方式。

  • Expo CLI Quickstart
  • React Native CLI Quickstart

推荐使用第二种方式

React Native安装方式

依赖的安装

IOS的依赖

需要Node, Watchman, the React Native command line interface, 和Xcode

Node安装

  • Node官网下载安装
  • 使用Homebrew安装
1
brew install node

Watchman安装

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

安装方式

1
brew install watchman

The React Native CLI的安装

在终端中运行下面的代码

1
npm install -g react-native-cli

注:如果报没有权限的错,在前面加 sudo

Xcode

同样需要在Xcode中安装Command Line Tools

打开Xcode,在Xcode菜单中选择Preferences,在Location面板选择Command Line Tools下拉菜单。

Xcode

Android的依赖

需要Node, Watchman, the React Native command line interface, JDK, 和Android Studio。

Node,Watchman,the React Native command line interface就不重复写了。

JDK

JDK下载的方式有两种

1
brew cask install java

安装Android Studio和SDK

具体安装Android Studio和SDK的步骤和要求可以查看官网的具体要求

容易出错的点:配置ANDROID_HOME环境变量

先在.bash_profile填写配置文件,在终端中输入vi ~/.bash_profile,接着在里面添加

1
2
3
4
5
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

bash_profile

如果你使用的不是bash,而是别的shell如zsh。则需要在对应的shell中添加以下这行代码

1
source $HOME/.bash_profile

zsh

创建一个新的Application

使用the React Native command line interface去创建一个新的React Native应用,名字叫做”RNProject”。

1
react-native init RNProject

成功后的样子是这样的

RNDone

运行React Native应用

先切换到项目根目录下

1
cd RNProject
  • IOS端运行下面的命令
1
react-native run-ios

运行后Xcode会弹出一个IOS模拟器,并且

  • Android端运行下面的命令

Android需要先打开模拟器在运行下面的代码

1
react-native run-android

终端在执行上面这段代码时,会先下载Android需要的一些依赖,最好是在打开代理的情况下进行下载。

当看到info ** BUILD SUCCESS **的信息时,并且自动弹出的终端Metro Bundler也运行成功,证明已经编译成功了。在对应的模拟器上就可以看到React Native创建的应用了。

IOS

但是,仍然可能会报错。这些问题可以自行谷歌。

注:在运行期间,这个自动弹出的终端是不能关闭的。


至此,在Mac平台搭建React Native开发环境已经完成。其他的如在Android或者Linux平台下搭建环境,可以在官网上自行查看。

Author: YangLeLe
Link: http://younglele.cn/build-react-native-development/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.