配置ReactNative環(huán)境及開發(fā)工具使用(ios)

# 配置ReactNative環(huán)境

### 安裝依賴

##### 必須安裝的依賴有:Node、Watchman、Xcode 和 CocoaPods。

-? Node、Watchman

安裝命令如下(前提安裝homebrew)

- brew install node

- brew install watchman

安裝homebrew的命令如下

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

在這里有時候會遇到坑,homebrew命令走完,提示安裝成功,運行brew命令時候會報錯-bash: brew: command not found這里造成原因比較多,可能是網(wǎng)絡(luò)問題,或者之前安裝其他軟件的配置和它有沖突。

解決方法:運行下面命令

- /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

因為這個命令已經(jīng)全部替換為國內(nèi)地址,而且每一步也有對應(yīng)注釋說明和報錯信息。走完最后提示安裝成功,再走brew命令就可正常安裝Node和Watchman。

另外xcode和cocoapods就是去官網(wǎng)下載安裝包和運行brew install cocoapods正常安裝即可。

# 開發(fā)工具選擇及基本使用

### VS Code , Sublime Text 3,Webstorm? , Nuclide 等

##### 感覺編寫前端代碼Webstorm? , Nuclide還比較方便,但是編譯reactnative項目性能太差,而且webstorm也收費,也越來越難破解。相對來說還是VS Code和Sublime Text 3比較好

下面大概介紹VS Code的安裝和基本使用流程

- 安裝地址:https://code.visualstudio.com/

- 一般編寫reactnative程序使用插件:React Native Tools,Auto Close Tag,Auto Rename Tag,ESLint ,Prettier ,Chinese (Simplified) Language Pack for Visual Studio Code等

安裝成功點擊左邊第五個按鈕,搜索框搜對應(yīng)插件![安裝插件地方](/images/1/517/屏幕快照 2020-05-27 上午10.28.19.png "安裝插件地方")

- React Native Tools:微軟官方開發(fā)的vscode下 React Native的開發(fā)輔助工具

- Auto Close Tag:自動閉合標簽

- Prettier :格式化代碼

- Chinese (Simplified) Language Pack for Visual Studio Code:語言漢化包

安裝完各個插件需重啟,然后打開項目運行。

運行項目可以控制臺終端運行命令:yarn ios或者yarn react-native run-ios來彈出模擬器運行項目

![運行reactnative-ios命令](/images/1/517/屏幕快照 2020-05-27 上午10.45.02.png "運行reactnative-ios命令")

然后按command+D,彈出調(diào)試框如圖

![調(diào)試對話框](/images/1/517/屏幕快照 2020-05-27 上午10.50.32.png "調(diào)試對話框")

然后選擇Debug,會彈出瀏覽器的調(diào)試界面,

![瀏覽器調(diào)試界面](/images/1/517/屏幕快照 2020-05-27 上午10.52.41.png "瀏覽器調(diào)試界面")

在瀏覽器的source添加項目文件即可進行斷點調(diào)試等功能。

?著作權(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ù)。

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