前言
現(xiàn)在react-native 確實很火, 其跨平臺能力以及接近原生的體驗確實值得學(xué)習(xí), 所以我也來湊個熱鬧學(xué)習(xí)一下, 學(xué)習(xí)一下后發(fā)現(xiàn)雖然大部分通過js編寫但語法還是稍有不同的, 在此分享下
一弥姻、環(huán)境配置
以下為Mac下的環(huán)境搭建
- 安裝Mac下的包管理工具HomeBrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 安裝node以及npm
$ brew install node
npm為node附帶的, 不用另外安裝, 如何使用npm下載一些依賴資源的時候下不動, 可以開VPN或更換npm鏡像, 一般推薦使用淘寶的
$ npm config set registry https://registry.npm.taobao.org --global $ npm config set disturl https://npm.taobao.org/dist --global - 官方推薦安裝的工具Watchman以及Flow
$ brew install watchman
$ brew install flow
到這里系統(tǒng)環(huán)境就基本完成了, 只需要添加react-native就可以開始了, 但手動添加還需要配置一大推東西, 所以推薦使用一些腳手架工具來完成, 這樣可以大大的簡便地創(chuàng)建一個初始的react-native項目
react-native-cli
安裝 react-native-cli
$ npm install react-native-cli -g
新建一個項目
$ react-native init myReactNativeApp -- version 0.39.2
注: (-- version 為指定RN的版本) Xcode版本一定要高于項目中RN的版本, 不然會導(dǎo)致編譯失敗
$ cd myReactNativeApp $ react-native run-ioscreate-react-native-app
在使用react-native-cli的時候有一個問題, 在我自己電腦上一切都好好的, 但公司電腦上如果用react-native 0.39以上的版本就會編譯失敗, 然后網(wǎng)上找了好久也沒有解決, 最后的看到github上issue上說用create-react-native-app這個構(gòu)建項目, 試了下還真的可以了, 感覺挺好用的, 推薦一下, 另外如果有人知道react-native-cli那個問題怎么解決請告知一下
安裝
$ npm install create-react-native-app -g
初始化一個項目
$ create-react-native-app my-app
$ cd my-app
$ npm start
至此就已經(jīng)創(chuàng)建了一個react-native項目了, 這個相比cli有個好處就是不用xcode或studio也能開發(fā)調(diào)試, 其配合Expo就可以預(yù)覽和開發(fā)了, 具體就不介紹了, 詳細介紹見鏈接
start后只有js部分代碼, 如果想添加native部分, 可以通過下面命令
$ npm run eject注: 此步驟不可逆
用Xcode編譯運行項目
$ npm run ios
二际歼、遇到的一些問題及解決方法
-
Xcode模擬器上無法打開RN的開發(fā)者選項卡#####
關(guān)閉xcode模擬器的虛擬鍵盤即可: cmd + shift + K
-
運行時遇到Error watching file for changes: EMFILE錯誤#####
需要重新安裝watchman
1.卸載原來安裝的watchman:
$ brew uninstall --force watchman
2.刪除原來的安裝文件:
$ rm -rf /usr/local/var/run/watchman/
3.重新安裝watchman:
$ brew install watchman
-
添加圖片資源后出現(xiàn) /back-icon@4x.ios.png: Unexpected character
關(guān)閉模擬器關(guān)閉serve
執(zhí)行$ react-native link
再重新build
-
getScrollableNode is undefined
部分API在還沒有聲明的時候調(diào)用
例: 在componentDidMount中使用DeviceEventEmitter監(jiān)聽通知時, 就會報這個錯誤, 將其放在InteractionManager.runAfterInteractions中延遲調(diào)用, 即可解決
PS: 初次學(xué)習(xí)RN, 有不對的地方歡迎指出和討論
