不知不覺自己已經使用了2年多的react的,起初接觸react的時候也聽吃力的,隨著使用的時間不短增加,react社群也不段的豐富,react的生態系統也越來越完善,相信現在使用react的小夥伴不會陌生。 redux、react-redux、react-router、react-saga、reselecte、webpack......等一系類的外掛,當然要有好多react腳手架:dva、umi、next、cra.....等,這些外掛和腳手架都能使我們們在使用react的時候更方便開發。
最近抽空看一眼react-native,我也問了我司的android開發和ios開發有沒有使用過react-native,他們的回答是沒有用過,但是他們的反映是react-native好像有很多坑,我作為實驗搭建react-native腳手架著,並不知道react-native有多少個坑,廢話不說分享一下我這兩天
動機(下面僅代表個人意見,如有錯誤可以留言修正)
話說使用react的開發人員,學習起來react-native不是很費力,我也是抱著試試態度折騰一下,我先在網上搜尋了一下,react-native的常用腳手架。大概有一下幾種-
react-native-cli(環境搭建不是太簡單)
-
優點
- 官方推薦
- 可維護性高
- 社群活躍
- start 75k
- 使用靈活
-
缺點
- 硬體要求mac
- 軟體 xcode、AndroidStudio
- 配置的時候需要翻牆
- 釋出正式包的時候需要配置環境。
- 未整合 saga、redux、reselect、react-navigation、react-native-debugger
react-native init program-name #初始化專案 npm start(react-native start) #在專案目錄下啟動 js service react-native run-android #已連線真機或開啟模擬器前提下,啟動專案 react-native run-ios 複製程式碼
-
create-react-native-app(環境搭建簡單)
-
優點
- create-react-native-app是React 社群孵化出來的一種無需構建配置就可以建立>RN App的一個開源專案,一個建立react native應用的腳手架工具(最好用,無需翻牆)
- 親自搭建確實方便快捷
- 不用整合react-navigation
- 整合Expo
-
缺點
- 需要客戶端(手機)現在 Expo,進行網路連線除錯
- 未整合 saga、redux、reselect、react-native-debugger
- start 11k
-
Expo react-native也有推薦但是我親自搭建環境優缺點無法總結
-
React Native awesome系列。
收集了很多元件、工具、教程和文章。 GitHub地址:github.com/jondot/awes….
動機(下面僅代表個人意見,如有錯誤可以留言修正)
話說使用react的開發人員,學習起來react-native不是很費力,我也是抱著試試態度折騰一下,我先在網上搜尋了一下,react-native的常用腳手架。大概有三種初步入坑(我選擇的是start最多最易入手的react-native-cli)
本身用mac開發,就好不費力了執行起來ios的虛擬機器,我看看一下 react-native的入門教程
發現不是太難就是直接開擼,但是由於自身的開發習慣,和使用腳手架的不同,感覺react-native-cli是一個純react專案,真能簡簡單單的玩玩,因為這個腳手架裡面沒有任何有助於實際開發外掛(saga、redux、reselect、react-native-debugger),處於自己的開發習慣就自己整合saga、redux、reselect、react-native-debugger,這樣看上去還像個腳手架。
效果(只是簡單執行一下action-》saga-》redux,和除錯工具操作)
圖1![react-native搭建用例(非CRNA)](https://i.iter01.com/images/e83d9546f1aece1f667ad47dc7443e4fe2a42ba4dfeea248d6a8cda9a2839ffb.png)
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/1374c4cac7acc4473488db7970620fe3820efe5a751b3c0a623a6f104ac34904.png)
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/447d6cf56ae935ffc5dcb84410b3c357acbb5e9c64bc645f5d68960b6985dedb.png)
圖4
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/6300c8f2b69013d33cf78d47b77b926733428e3111420a66d26c00b41b62776f.png)
會發現圖3和圖4都是有相應的改變,這樣是不是就符合我們們大家平常的開發了對於store的變化一目瞭然。接下來看看 console和elements,以及其他的除錯看圖
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/02fa071efc62065ced85467aa23f8fa2844846db849f871a987c399c3e36449c.png)
看到這的時候你是不是已經很喜歡了,這不是是web開發嗎 哈哈?。看下圖
路由跳轉
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/dfa34860c1f1b0d1d16c65d687c42dde882a638350dca60b94e30261ade6c845.png)
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/f4c0f8e8440fe2bfecac87772cb923b84634ed5ba5d71cca9274c7de964bd123.png)
state改變
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/fb3bc239b1c48a31eea95a697840862a48e67abacce489a0693f1ba7811cc95a.png)
log提示
![react-native搭建用例(非CRNA)](https://i.iter01.com/images/73d2d5e25855cd1dd99e2bc5c7d20aa3c76c7642523f8c73a33c26a523688cef.png)
這是不是個react web開發很想,github地址 github.com/zhangfalian…, 有興趣的可以clone一份玩耍一下,有什麼不對的地方在留言中提出,我也是第一次玩react-native