MAC React Native

Mac平台搭建React Native开发环境

Posted on 2019-03-24,5 min read

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

1. 工具安装

1.1 代理配置

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

代理配置:

  • 在终端中输入这个代码
vi ~/.zshrc
  • 在vim中按下键盘字母i,在最后面粘贴下面代码
#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保存并退出。
  • 终端中输入
source ~/.zshrc

1.2 Homebrew

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

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

1.3 Xcode

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

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

1.4 Webstorm、VS Code

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

安装:

1.5 Android Studio

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

安装:Android Studio

2. 开始安装

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

  • Expo CLI Quickstart
  • React Native CLI Quickstart

推荐使用第二种方式

React Native安装方式

2.1 依赖的安装

2.1.1 IOS的依赖

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

Node安装

  • Node官网下载安装
  • 使用Homebrew安装
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.

安装方式

brew install watchman

The React Native CLI的安装

在终端中运行下面的代码

npm install -g react-native-cli

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

Xcode

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

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

Xcode

2.1.2 Android的依赖

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

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

JDK

JDK下载的方式有两种

brew cask install java

安装Android Studio和SDK

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

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

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

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中添加以下这行代码

source $HOME/.bash_profile
zsh

2.2 创建一个新的Application

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

react-native init RNProject

成功后的样子是这样的

RNDone

2.3 运行React Native应用

先切换到项目根目录下

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

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

  • Android端运行下面的命令

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

react-native run-android

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

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

IOS

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

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


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

下一篇: 黑苹果安装过程中的一些简单记录