React Native配置環(huán)境及使用

安裝參照標(biāo)準(zhǔn):React Native中文網(wǎng)

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

$ brew install node

1.下載過慢/失?。?/h4>
  • 若非墻則重試很多次都下載很慢,有些依賴下載不下來,我的是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復(fù)制終端代理命令,查看地址:為127.0.0.1:1087,終端輸入:(親測可用)
$ ALL_PROXY=socks5://127.0.0.1:1087 brew install node
  • 方法二:打開shadowsockets,復(fù)制終端代理命令,粘貼到終端回車,再安裝
$ 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查看可選的源

  • 帶*的是當(dāng)前使用的源
$ 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.切換國內(nèi)源可加快下載速度

# 使用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

五.下載開發(fā)工具Xcode(iOS平臺)

React Native 目前需要Xcode 10 或更高版本。你可以通過 App Store 或是到Apple 開發(fā)者官網(wǎng)上下載。這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具

啟動 Xcode,并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具,比如git等。

六.創(chuàng)建新項目

必須要看的注意事項一:0.45 及以上版本需要依賴 boost 等幾個很難下載成功的第三方庫編譯。這里有中文網(wǎng)提供的國內(nèi)下載鏈接

必須要看的注意事項二:0.60 及以上版本依賴CocoaPods安裝。CocoaPods的倉庫在國內(nèi)也很難訪問。如果在CocoaPods的安裝步驟卡很久,可以試一下這個國內(nèi)鏡像

1.先查看當(dāng)前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.創(chuàng)建新項目:參考React Native中文網(wǎng)—創(chuàng)建新項目

  • 我的react-native版本是0.60以上,所以需要先安裝cocoapods
(1)桌面創(chuàng)建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源,我的是國內(nèi)鏡像源
$ 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
      1. 解壓后的pods_0.60+文件夾與~/Library/Caches/CocoaPods/pods文件夾合并(merge),如果沒有這個文件夾則創(chuàng)建一個
  • 再次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

七、參考文獻(xiàn)

補充知識:
node中,npm、nvm、nrm、npx、cnpm區(qū)別和用法

安裝參考:
React Native中文網(wǎng)
homebrew安裝
nrm安裝與配置
iOS RN 0.45以上版本所需的第三方編譯庫(boost等)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容