【React Native】Mac端iOS和Android开发环境搭建完全教程

【React Native】Mac端iOS和Android开发环境搭建完全教程

安装iOS和Android通用依赖项

• 安装 Homebrew

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

将以上命令粘贴至终端。脚本会在执行前暂停，并说明将它将做什么。

liyuechun:~ yuechunli$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew

Press RETURN to continue or any other key to abort
==> /usr/bin/sudo /bin/mkdir -p /Users/liyuechun/Library/Caches/Homebrew
Password:
==> /usr/bin/sudo /bin/chmod g+rwx /Users/liyuechun/Library/Caches/Homebrew
==> /usr/bin/sudo /usr/sbin/chown yuechunli /Users/liyuechun/Library/Caches/Homebrew
==> /usr/bin/sudo /bin/mkdir -p /Library/Caches/Homebrew
==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew
==> /usr/bin/sudo /usr/sbin/chown yuechunli /Library/Caches/Homebrew
==> Downloading and installing Homebrew...
remote: Counting objects: 346, done.
remote: Compressing objects: 100% (181/181), done.
remote: Total 346 (delta 277), reused 202 (delta 153), pack-reused 0
Receiving objects: 100% (346/346), 76.15 KiB | 0 bytes/s, done.
Resolving deltas: 100% (277/277), completed with 217 local objects.
From https://github.com/Homebrew/brew
 + e1098b0e...ed9942fb master     -> origin/master  (forced update)
 * [new tag]           1.2.2      -> 1.2.2
 * [new tag]           1.2.3      -> 1.2.3
HEAD is now at ed9942fb Merge pull request #2769 from MikeMcQuaid/rubocop-no-perl-backrefs
Updated 2 taps (caskroom/cask, homebrew/core).
==> Cleaning up /Library/Caches/Homebrew...
==> Migrating /Library/Caches/Homebrew to /Users/liyuechun/Library/Caches/Homebr
==> Deleting /Library/Caches/Homebrew...
==> New Formulae
angular-cli                fsql                       overmind
antlr4-cpp-runtime         get_iplayer                percona-server-mongodb
asdf                       grakn                                      zanata-client
goofys                     opus ✔
==> Deleted Formulae
autotrace           libtess2            snescom             xplanetfx
==> Installation successful!

==> Homebrew has enabled anonymous aggregate user behaviour analytics.
Read the analytics documentation (and how to opt-out) here:
  http://docs.brew.sh/Analytics.html

==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    http://docs.brew.sh
liyuechun:~ yuechunli$ brew --version
Homebrew 1.2.3
Homebrew/homebrew-core (git revision c88f7; last commit 2017-06-13)
liyuechun:~ yuechunli$ 

Homebrew官方参考文档

微信扫一扫关注21点见服务号

• 安装Node

brew install node

liyuechun:~ yuechunli$ brew install node
==> Downloading https://homebrew.bintray.com/bottles/node-8.1.0_1.sierra.bottle.
######################################################################## 100.0%
==> Pouring node-8.1.0_1.sierra.bottle.tar.gz
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink bin/node
Target /usr/local/bin/node
already exists. You may want to remove it:
  rm '/usr/local/bin/node'

To force the link and overwrite all conflicting files:
  brew link --overwrite node

To list all files that would be deleted:
  brew link --overwrite --dry-run node

Possible conflicting files are:
/usr/local/bin/node
/usr/local/include/node/android-ifaddrs.h
/usr/local/share/man/man1/node.1
/usr/local/share/systemtap/tapset/node.stp
/usr/local/lib/dtrace/node.d
==> Using the sandbox
Warning: The post-install step did not complete successfully
You can try again using `brew postinstall node`
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
��  /usr/local/Cellar/node/8.1.0_1: 3,782 files, 45.9MB

liyuechun:~ yuechunli$ node -v
v7.7.4

liyuechun:~ yuechunli$ npm -v
module.js:472
    throw err;
    ^

Error: Cannot find module '../lib/utils/unsupported.js'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at /usr/local/lib/node_modules/npm/bin/npm-cli.js:19:21
    at Object.<anonymous> (/usr/local/lib/node_modules/npm/bin/npm-cli.js:92:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
liyuechun:~ yuechunli$ 

备注： 如果通过brew install node来安装node，安装完毕后，需要在终端输入node -v和npm -v检查node是否安装成功，在我上面的案例中，当检查npm的版本时，出现上面的错误，说明安装有问题。

解决办法：
1、打开终端，删除已安装的Node

liyuechun:~ yuechunli$ rm -rf /usr/local/Cellar/node/
liyuechun:~ yuechunli$ rm -rf /usr/local//bin/node
liyuechun:~ yuechunli$ rm -rf /usr/local//bin/npm

2、移步https://nodejs.org/zh-cn/ 下载最新Node.js

3、双击node-v8.1.0.pkg安装包，一直下一步即可

4、安装完毕后，打开终端，检查是否安装成功

liyuechun:~ yuechunli$ node -v
v8.1.0
liyuechun:~ yuechunli$ npm -v
5.0.3

如上所示，Node即安装成功。

• 安装Watchman

liyuechun:~ yuechunli$ brew install watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.7.0.sierra.bottl
######################################################################## 100.0%
==> Pouring watchman-4.7.0.sierra.bottle.tar.gz
==> Using the sandbox
==> launchctl unload -F /Users/liyuechun/Library/LaunchAgents/com.github.faceboo
��  /usr/local/Cellar/watchman/4.7.0: 21 files, 429.5KB
liyuechun:~ yuechunli$ watchman -v
4.7.0
liyuechun:~ yuechunli$ 

• 安装React Native CLI

liyuechun:~ yuechunli$ npm install -g react-native-cli
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
updated 41 packages in 8.803s
liyuechun:~ yuechunli$ 

创建项目

liyuechun:Pictures yuechunli$ mkdir Project
liyuechun:Pictures yuechunli$ cd Project/
liyuechun:Project yuechunli$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/liyuechun/Pictures/Project/AwesomeProject
Using yarn v0.21.3
Installing react-native...
yarn add v0.21.3
info No lockfile found.
[1/4] ��  Resolving packages...
[2/4] ��  Fetching packages...
[3/4] ��  Linking dependencies...
warning "react-native@0.45.1" has unmet peer dependency "react@16.0.0-alpha.12".
[4/4] ��  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "0.24.6" while you're on "0.21.3".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 469 new dependencies.
├─ absolute-path@0.0.0
├─ accepts@1.2.13
└─ yargs@6.6.0
✨  Done in 22.41s.
Setting up new React Native app in /Users/liyuechun/Pictures/Project/AwesomeProject
Adding React...
yarn add v0.21.3
[1/4] ��  Resolving packages...
[2/4] ��  Fetching packages...
[3/4] ��  Linking dependencies...
[4/4] ��  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
├─ loose-envify@1.3.1
├─ prop-types@15.5.10
└─ react@16.0.0-alpha.12
✨  Done in 4.28s.
Adding Jest...
yarn add v0.21.3
[1/4] ��  Resolving packages...
[2/4] ��  Fetching packages...
[3/4] ��  Linking dependencies...
[4/4] ��  Building fresh packages...
success Saved lockfile.
success Saved 114 new dependencies.
├─ abab@1.0.3
├─ acorn-globals@3.1.0
├─ yargs-parser@5.0.0
└─ yargs@7.1.0
✨  Done in 7.88s.
To run your app on iOS:
   cd /Users/liyuechun/Pictures/Project/AwesomeProject
   react-native run-ios
   - or -
   Open ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/liyuechun/Pictures/Project/AwesomeProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android
liyuechun:Project yuechunli$ 

项目结构图

iOS开发环境安装与项目运行

Xcode安装

打开App Store，在搜索框里面输入Xcode，如下入所示，点击获取安装Xcode即可。

运行iOS项目的两种方法

第一种(Xcode直接运行)

如下图所示，直接双击打开AwesomeProject.xcodeproj项目。

如下图所示，点击运行按钮运行项目。

第二种(终端)

1、新建一个终端，切换到项目根目录，通过`npm start启动服务器

Last login: Tue Jun 13 17:16:06 on ttys002
localhost:~ yuechunli$ cd /Users/liyuechun/Pictures/Project/AwesomeProject 
localhost:AwesomeProject yuechunli$ ls
__tests__       index.ios.js        package.json
android         ios         yarn.lock
app.json        jsconfig.json
index.android.js    node_modules
localhost:AwesomeProject yuechunli$ npm start

> AwesomeProject@0.0.1 start /Users/liyuechun/Pictures/Project/AwesomeProject
> node node_modules/react-native/local-cli/cli.js start

Scanning 558 folders for symlinks in /Users/liyuechun/Pictures/Project/AwesomeProject/node_modules (9ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/liyuechun/Pictures/Project/AwesomeProject 


React packager ready.

Loading dependency graph, done.

2、再新建一个终端，切换到项目根目录，在终端输入react-native run-ios

效果图

下面是效果图。

Android开发环境安装与项目运行

Java Development Kit 安装

• 下载最新版的JDK并安装
• 在终端输入java -version检查JDK是否安装成功

liyuechun:~ yuechunli$ java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)
liyuechun:~ yuechunli$ 

Android 开发环境

• 安装Android Studio

下载并且安装Android Studio

安装过程中遇到下面的选项时，选择custom。

遇到下面的选项时，下图中的选项为必选项。

• 安装Android SDK

  • 在Android SDK欢迎界面点击Configure,再点击SDK Manager。

  

  • 安装Android 6.0

  

在上图中，选中SDK Platforms,将Show Package Details打上勾，展开Android 6.0 (Marshmallow)入口, 然后确保下面的选项被选中。

* Google APIs
* Android SDK Platform 23
* Intel x86 Atom_64 System Image
* Google APIs Intel x86 Atom_64 System Image

接下来点击Apply->OK进行安装。

• 23.0.1安装

  • 选中SDK Tools
  • Show Package Details打勾
  • 展开Android SDK Build-Tools
  • 选中23.0.1
  • 点击Apply->OK开始下载安装

如下图所示：

• 配置ANDROID_HOME环境变量

如上图所示，打开终端，通过pwd查看当前路径，当前路径必须和Android SDK Location的红线部分一致。

在/User/liyuechun路径(在你电脑上，liyuechun应该换成你的电脑名字)通过vi打开.bash_profile文件，并将下面的代码添加到.bash_profile文件中。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

保存并且退出后，在终端输入source .bash_profile命令立即让环境变量生效。

• 通过Android Studio运行Android程序

  • 打开终端，切换到项目根目录，启动服务器

  

  • 通过Android Studio打开下图中的文件夹

  

  • 点击运行，运行效果如下

  

微信扫一扫关注21点见服务号