建站
咨詢
售后
建站咨詢
新聞中心
最近開(kāi)始全面使用React技術(shù)棧開(kāi)發(fā)，耳聽(tīng)得團(tuán)隊(duì)不久的將來(lái)有計(jì)劃使用React Native開(kāi)發(fā)app，迫不及待來(lái)嘗試一波，首先搭建好開(kāi)發(fā)環(huán)境并跑起來(lái)咱們程序界的經(jīng)典程序，期間也有一些坑，在這里記錄分享給大家。
高平ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！
索引
安裝包管理工具
本人使用的是Mac環(huán)境，所以以Mac為例，對(duì)于Windows，其實(shí)差別不大。
安裝Homebrew
Homebrew是為Mac OS量身定制的一款集成包管理工具，我們使用它很方便的安裝Node.js及切換Node.js版本。
- /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注：在Max OS X 10.x版本中使用Homebrew安裝軟件時(shí)可能會(huì)發(fā)生 /usr/local 目錄不可寫的權(quán)限問(wèn)題，此時(shí)可以使用如下命令修復(fù)：
- sudo chown -R `whoami` /usr/local
安裝Node.js
接下來(lái)使用Homebrew安裝Node.js，Windows環(huán)境可以直接去官網(wǎng)下載安裝 Node.js ：
- brew install node
如果安裝下載速度過(guò)慢，可以設(shè)置使用國(guó)內(nèi)淘寶提供的鏡像：
- npm config set registry https://registry.npm.taobao.org --global
- npm config set disturl https://npm.taobao.org/dist --global
安裝包管理
我們可以自由選擇直接使用NPM或者另外安裝Yarn包管理工具，對(duì)于NPM的使用相信大家都已經(jīng)很熟悉了，我們這里以Yarn為例：
Yarn 是Facebook提供的替代npm的工具，可以加速node模塊的下載。
依然需要使用NPM安裝Yarn包：
- npm install -g yarn
隨后我們就可以使用 yarn add 代替 npm install --save 了。
安裝react-native-cli腳手架
React Native官方提供了一鍵生成項(xiàng)目初始結(jié)構(gòu)的腳手架，初學(xué)者或體驗(yàn)者可以直接安裝使用：
- npm install -g react-native-cli
安裝設(shè)置編輯器
Mac我們使用Xcode開(kāi)發(fā)iOS APP，安卓開(kāi)發(fā)可以使用Eclipse等，另外需要對(duì)Xcode編輯器進(jìn)行簡(jiǎn)單配置以支持react native：
依次點(diǎn)擊打開(kāi)Xcode編輯器的Menu-》Preferences-》Locations，配置如下圖紅框中的命令行工具項(xiàng)：
初始化項(xiàng)目及解決運(yùn)行異常
接下來(lái)可以使用腳手架初始化一個(gè)示例程序了：
- // 初始化一個(gè)hello項(xiàng)目
- react-native init hello
- cd hello
進(jìn)入項(xiàng)目根目錄后，使用 run-ios 指令啟動(dòng)該iOS APP：
- react-native run-ios
對(duì)于版本高于0.45的創(chuàng)建項(xiàng)目，也許你會(huì)看到如下錯(cuò)誤：
- Error:
- Build failed:
- Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...
- Print: Entry, ":CFBundleIdentifier", Does Not Exist
降級(jí)版本方案
本人經(jīng)過(guò)多方查找，發(fā)現(xiàn)是創(chuàng)建項(xiàng)目下載安裝node依賴模塊時(shí)的資源缺失問(wèn)題，目前***的0.45及以上版本需要下載boost庫(kù)，該庫(kù)過(guò)大，導(dǎo)致下載出問(wèn)題，參考:
https://github.com/facebook/react-native/issues/14368
https://github.com/facebook/react-native/issues/14447
解決方案有兩種，如果不追求新版本新特性，可以降低創(chuàng)建項(xiàng)目的版本，使用 --version 指令明確設(shè)置項(xiàng)目版本：
- react-native init MyApp --version 0.44.3
替換資源文件方案
依然希望使用新版本的解決方案則是手動(dòng)下載相關(guān)文件替換：
下載如下四個(gè)相關(guān)文件放到項(xiàng)目根目錄下的 .rncache 目錄下，進(jìn)行替換：
下載地址： https://pan.baidu.com/s/1kV5iVzD.
下載后替換：
- cd ~/.rncache
- cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/
依次使用 cp 指令復(fù)制替換四個(gè)文件;
然后刪除第三方庫(kù)文件，在 node_modules/react-native/third-party/ 目錄下：
- rm -r project/node_modules/react-native/third-part
再次執(zhí)行啟動(dòng)程序：
- react-native run-ios
發(fā)現(xiàn)可以正常運(yùn)行了，接下來(lái)我們可以在編輯器里編輯我們的項(xiàng)目了，如我們的react-native入口js文件– index.ios.js 文件，刷新即可看到變更。
其他工具
Nuclide
Nuclide是由Facebook提供的一款基于atom編輯器的集成開(kāi)發(fā)環(huán)境，可用于編寫、 運(yùn)行 和 調(diào)試 React Native應(yīng)用。
文章名稱：React Native開(kāi)發(fā)環(huán)境搭建
鏈接分享：http://www.5511xx.com/article/djhjddh.html
