React Native配置环境及使用

安装参照标准：React Native中文网

一.安装node(需要先安装homebrew)

$ brew install node

1.下载过慢/失败：

• 若非墙则重试很多次都下载很慢，有些依赖下载不下来，我的是node和python下载不下来提示如下：

==> Downloading https://homebrew.bintray.com/bottles/node-13.8.0.catalina.bottle
==> Downloading from https://akamai.bintray.com/6a/6a7bb59475a74827139563a4aa12d
###############################################################           87.8%
curl: (18) transfer closed with 2043968 bytes remaining to read
Error: Failed to download resource "node"
Download failed: https://homebrew.bintray.com/bottles/node-13.8.0.catalina.bottle.tar.gz
Warning: Bottle installation failed: building from source.
==> Installing dependencies for node: python
==> Installing node dependency: python
==> Downloading https://homebrew.bintray.com/bottles/python-3.7.6_1.catalina.bot
==> Downloading from https://akamai.bintray.com/38/3871ef8b53270576c46489ae397f2
-=O=-                           #     #     #     #                           
curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to akamai.bintray.com:443 
Error: Failed to download resource "python"
Download failed: https://homebrew.bintray.com/bottles/python-3.7.6_1.catalina.bottle.tar.gz
Warning: Bottle installation failed: building from source.
==> Downloading https://www.python.org/ftp/python/3.7.6/Python-3.7.6.tar.xz

curl: (22) The requested URL returned error: 500
Error: An exception occurred within a child process:
  DownloadError: Failed to download resource "python"
Download failed: https://www.python.org/ftp/python/3.7.6/Python-3.7.6.tar.xz

2.解决方法

使用代理【下载工具（shadowsockets），找免费/自费ssr配置好】

• 方法一：打开shadowsockets复制终端代理命令，查看地址：为127.0.0.1:1087，终端输入：（亲测可用）

$ ALL_PROXY=socks5://127.0.0.1:1087 brew install node

• 方法二：打开shadowsockets，复制终端代理命令，粘贴到终端回车，再安装

$ export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;
$ brew install node

3.查看是否安装成功

• 若成功则显示版本号

$ node -v

v13.8.0

二.安装watchman

$ brew install watchman

查看是否安装成功

• 若成功则显示版本号

$ watchman -v

4.9.0

三.安装nrm

具体其他功能可参考nrm安装与配置

$ npm install -g nrm

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/nrm -> /usr/local/lib/node_modules/nrm/cli.js
+ nrm@1.2.1
added 494 packages from 873 contributors in 100.184s

1.若成功查看nrm查看可选的源

• 带*的是当前使用的源

$ nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

2.切换国内源可加快下载速度

# 使用nrm工具切换淘宝源
$ npx nrm use taobao

# 如果之后需要切换回官方源可使用 
$ npx nrm use npm

• 切换taobao成功提示

Registry has been set to: https://registry.npm.taobao.org/

四.安装Yarn

1.安装工具Yarn

$ npm install -g yarn

/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.4
added 1 package in 16.735s

2.查看是否安装成功

• 若成功则显示版本号

$ yarn -v

1.22.4

五.下载开发工具Xcode（iOS平台）

React Native 目前需要Xcode 10 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具

启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

六.创建新项目

必须要看的注意事项一：0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译。这里有中文网提供的国内下载链接。

必须要看的注意事项二：0.60 及以上版本依赖CocoaPods安装。CocoaPods的仓库在国内也很难访问。如果在CocoaPods的安装步骤卡很久，可以试一下这个国内镜像

1.先查看当前react-native版本(我的是0.61.5)

$ npm info react-native

 react-native@0.61.5 | MIT | deps: 29 | versions: 328
A framework for building native apps using React
https://github.com/facebook/react-native#readme

bin: react-native

dist
.tarball: https://registry.npm.taobao.org/react-native/download/react-native-0.61.5.tgz
.shasum: 6e21acb56cbd75a3baeb1f70201a66f42600bba8

dependencies:
@babel/runtime: ^7.0.0                               fbjs: ^1.0.0                                         
@react-native-community/cli-platform-android: ^3.0.0 hermes-engine: ^0.2.1                                
@react-native-community/cli-platform-ios: ^3.0.0     invariant: ^2.2.4                                    
@react-native-community/cli: ^3.0.0                  jsc-android: ^245459.0.0                             
abort-controller: ^3.0.0                             metro-babel-register: ^0.56.0                        
art: ^0.10.0                                         metro-react-native-babel-transformer: ^0.56.0        
base64-js: ^1.1.2                                    metro-source-map: ^0.56.0                            
connect: ^3.6.5                                      nullthrows: ^1.1.0                                   
create-react-class: ^15.6.3                          pretty-format: ^24.7.0                               
escape-string-regexp: ^1.0.5                         promise: ^7.1.1                                      
event-target-shim: ^5.0.1                            prop-types: ^15.7.2                                  
fbjs-scripts: ^1.1.0                                 react-devtools-core: ^3.6.3                          
(...and 5 more.)

maintainers:
- cpojer <christoph.pojer@gmail.com>
- fb <opensource+npm@fb.com>
- grabbou <grabbou@gmail.com>
- hectorramos <hector@hectorramos.com>
- react-native-bot <opensource+react-native-bot@fb.com>

dist-tags:
latest: 0.61.5     next: 0.62.0-rc.5  

published 3 months ago by react-native-bot <opensource+react-native-bot@fb.com>

2.创建新项目：参考React Native中文网—创建新项目

• 我的react-native版本是0.60以上，所以需要先安装cocoapods

（1）桌面创建AwesomeProject的RN项目

$ cd Desktop
$ npx react-native init AwesomeProject


                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

                  Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
⠧ Installing CocoaPods dependencies (this may take a few minutes)Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
[!] CDN: trunk URL couldn't be downloaded: https://raw.githubusercontent.com/CocoaPods/Specs/master/Specs/6/7/d/boost-for-react-native/1.63.0/boost-for-react-native.podspec.json Response: Timeout was reached

• 等待一会后提示失败，并给出了解决方法

✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./AwesomeProject/ios && pod install".
CocoaPods documentation: https://cocoapods.org/

解决方法

• 1.查看pod源,我的是国内镜像源

$ pod repo

master
- Type: git (master)
- URL:  https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git

• 2.因此需要修改./AwesomeProject/iOS/Podfile，添加一行

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

• 3.保存修改Podfile，重新安装

$ cd ./AwesomeProject/iOS
$ pod install

Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.61.5)
Installing FBReactNativeSpec (0.61.5)
Installing Folly (2018.10.22.00)
Installing RCTRequired (0.61.5)
Installing RCTTypeSafety (0.61.5)
Installing React (0.61.5)
Installing React-Core (0.61.5)
Installing React-CoreModules (0.61.5)
Installing React-RCTActionSheet (0.61.5)
Installing React-RCTAnimation (0.61.5)
Installing React-RCTBlob (0.61.5)
Installing React-RCTImage (0.61.5)
Installing React-RCTLinking (0.61.5)
Installing React-RCTNetwork (0.61.5)
Installing React-RCTSettings (0.61.5)
Installing React-RCTText (0.61.5)
Installing React-RCTVibration (0.61.5)
Installing React-cxxreact (0.61.5)
Installing React-jsi (0.61.5)
Installing React-jsiexecutor (0.61.5)
Installing React-jsinspector (0.61.5)
Installing ReactCommon (0.61.5)
Installing Yoga (1.14.0)
Installing boost-for-react-native (1.63.0)

[!] Error installing boost-for-react-native
[!] /usr/bin/git clone https://github.com/react-native-community/boost-for-react-native.git /var/folders/gl/71htqdr947s4hhl4z7p0rdwh0000gn/T/d20200315-62405-1fbvl1y --template= --single-branch --depth 1 --branch v1.63.0-0

Cloning into '/var/folders/gl/71htqdr947s4hhl4z7p0rdwh0000gn/T/d20200315-62405-1fbvl1y'...
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

• 好吧，又失败了，因为boost-for-react-native (1.63.0)这个太大了130M可能下载需要很长时间

RN依赖库超时解决方法：

• 我的RN版本是0.60+,解决方法如下(其他版本参考：iOS RN 0.45以上版本所需的第三方编译库(boost等))：

  • 1. 找到rn-third-party下pods_0.60+.zip
  • 2. 解压后的pods_0.60+文件夹与~/Library/Caches/CocoaPods/pods文件夹合并(merge)，如果没有这个文件夹则创建一个

• 再次pod install 成功

$ pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.61.5)
Installing FBReactNativeSpec (0.61.5)
Installing Folly (2018.10.22.00)
Installing RCTRequired (0.61.5)
Installing RCTTypeSafety (0.61.5)
Installing React (0.61.5)
Installing React-Core (0.61.5)
Installing React-CoreModules (0.61.5)
Installing React-RCTActionSheet (0.61.5)
Installing React-RCTAnimation (0.61.5)
Installing React-RCTBlob (0.61.5)
Installing React-RCTImage (0.61.5)
Installing React-RCTLinking (0.61.5)
Installing React-RCTNetwork (0.61.5)
Installing React-RCTSettings (0.61.5)
Installing React-RCTText (0.61.5)
Installing React-RCTVibration (0.61.5)
Installing React-cxxreact (0.61.5)
Installing React-jsi (0.61.5)
Installing React-jsiexecutor (0.61.5)
Installing React-jsinspector (0.61.5)
Installing ReactCommon (0.61.5)
Installing Yoga (1.14.0)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `AwesomeProject.xcworkspace` for this project from now on.
Pod installation complete! There are 28 dependencies from the Podfile and 26 total pods installed.

（2）项目pods安装成功后可以看到生成的AwesomeProject.xcworkspace 打开之后修改bundleId用模拟器运行成功

项目运行成功.png

七、参考文献

补充知识：
node中，npm、nvm、nrm、npx、cnpm区别和用法

安装参考：
React Native中文网
homebrew安装
nrm安装与配置
iOS RN 0.45以上版本所需的第三方编译库(boost等)