不知不覺自己已經使用了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


圖4

會發現圖3和圖4都是有相應的改變,這樣是不是就符合我們們大家平常的開發了對於store的變化一目瞭然。接下來看看 console和elements,以及其他的除錯看圖

看到這的時候你是不是已經很喜歡了,這不是是web開發嗎 哈哈?。看下圖
路由跳轉


state改變

log提示

這是不是個react web開發很想,github地址 github.com/zhangfalian…, 有興趣的可以clone一份玩耍一下,有什麼不對的地方在留言中提出,我也是第一次玩react-native