大家好,我是 @大寧的洛竹
本文首發於 洛竹的官方網站
本文已授權掘金開發者社群公眾號獨家使用,包括但不限於編輯、標註原創等權益。
緣起
那是 18 年的夏天,公司 6 月底去成都團建回鄭州後,小弟、肖老師和當時綽號小萌的我(以下簡稱三劍客)開始了使用 React Native 開發 App 的工作。當時經驗尚淺的我也只是有小程式和公眾號的開發經驗,唯一的亮點就是封裝了 wx-promise-pro 並獨立完成了一個小程式的全棧開發,而另外兩位同事一個後端大佬經驗豐富,一個 ios、vue、android、C#、Java 等等技能棧點滿。
怎麼說呢,當時也就中等焦慮吧。也就趕鴨子上架各種不適,也就睡不好吃不好擔心末位淘汰,也就擔心沒工作被我爸嘮叨。
人們常說壓不倒你的,最終都能成就你。我就是頂著巨大心裡壓力一頭扎進了跨端開發這個領域,一晃便是兩年多過去了。接著掘金的活動,和大家聊一聊 RN 的一些事。
聊聊 React Native 入門
找到洛竹的詢問 React Native 最多的問題便是 React Native 環境的搭建,我都會耐心地幫助大家排查(有時也會讓仔細看官網)。這個時候我一般都會和他們聊一下我們三劍客初次搭建環境最快的也是用了一整個工作日,最慢的因為電腦環境混亂多花了一個週末排查問題的故事。
萬事開頭難這句話用在 RN 和 Flutter 上尤其合適,跨端對於原生轉和前端上手都是不太友好的,所以不要再問前端轉合不合適,原生轉不比你舒服到哪裡去。
這裡提醒大家關於環境的幾點:
- Java jdk 一定要安裝 1.8 系列
- 儘量使用安卓真機測試
- 如果用 Android Studio 開啟專案,不要跟著提示隨便升級 gradle
- RN 0.60 之後 ios 使用 cocoapod 管理專案依賴,這玩意如果網速不好,會卡住。建議別折騰,買個 ** 也餓不死人的
聊聊跨端開發
跨端開發也叫 Hybrid Development,React Native、Flutter、Weex 都屬於這個範疇。任何事物的出現必然是有其客觀需求存在,跨端開發相較於傳統的原生開發有其迭代週期快、可以在釋出應用後熱更新程式碼、甚至程式碼直接通過服務動態下發的優點,相較於 Codava、H5 打包這種解決了 60 幀問題,效能更好更接近原生。
目前前兩者在各大廠 App 中都有業務落地,眾所周知的閒魚使用 Flutter 寫了不少業務,前文提到的我們三劍客是完全用 React Native 搭建的專案,而現在我所在的塗鴉智慧的 App 是使用原生搭建專案,嵌入我們的核心皮膚業務。我們不可能把所有的裝置控制皮膚都寫在 App 中,ios、android 的平臺也不能動態下發程式碼,而 React Native 可以實現開發皮膚 -> 打包 -> 註冊到雲端 -> 客戶端根據從服務端動態載入相應的業務程式碼這個流程。順便提一下隔壁小組也有在做基於 Flutter 的一碼多端方案,加入塗鴉,無論你是 RN 開發者還是 Flutter 開發者都能發揮所長。
從事 RN 開發需要會什麼?
以我的經驗來看,只要你有程式設計經驗,快速從事 RN 業務開發難度並不大。寫頁面用到的無非是 React 語法、React Native 內建元件的使用和第三放元件、API 的使用。
但是如果是要掌控整個 App 的架構和開發,那要求會多一些。但也無非是 React 開發同樣需要掌握的全域性狀態管理、路由管理、元件封裝等能力。
你可能會問不會原生開發可以從事 RN 開發嗎?答案是肯定的,跨端方案的出現對於前端開發者的一大利好便是可以使用前端技術開發移動應用。React Native 不管是官方還是社群都有大量的封裝好的 SDK 可供使用,比如 react-native-svg、react-native-camera、react-native-video、react-native-sound、react-native-permissions 等等這些優秀的三方庫。當然你可能還有疑問,如果社群沒有現成的,或者需要自定義原生的功能才能完成業務怎麼辦?這個就沒那麼簡單了,但是別擔心,現代工業社會是講究協作和精細化分工的,在塗鴉,我們有專業的原生開發團隊為我們提供底層 SDK 業務編寫,但是我還建議大家 ios、android 的橋接程式碼還是要會寫、原生的配置要懂,有助於提升個人能力和稀缺性。相信我這並不複雜,你遇到的問題搜一下也能解決。洛竹的經驗也僅限於掌握原生配置、對原生 SDK 進行封裝暴露介面給 JS 層呼叫,ios 課程買了有一年了,也沒看一點(實在慚愧)。對原生 SDK 橋接感興趣的可以看下原生模組簡介和create-react-native-module。
聊聊我為社群做的一些事
你可能會在各種 react native 倉庫的 issue 中看到我的身影,這裡也推薦大家遇到什麼問題多去 github 看看 issues,一個成熟的倉庫基本都能在 issue 中找到解決辦法。
- umi-plugin-react-native:Show React Native Demo with dumi powered by react-native-web
- react-native-quill-editor:React Native Quill Rich Text Editor Wrapper
- react-native-form:私塾React Native動態表單專案,這個專案後來只在內部更新了,離職一年多了,大概率被同事重構了已經,我一直說要用 hooks 實現以下,也沒得機會。
- react-native-screenshot:簡單易用的 React Native 截圖、監聽系統截圖事件元件(ios、android)
- react-native-office-viewer:Office Preview Plugin for React Native(support png,pdf,doc,xls,txt...)
- react-native-template-sishu:? Clean and minimalist React Native template for a quick start with TypeScript.
- react-native-qiniu:Qiniu React Native SDK ,A pure javascript implementation
- react-native-float-ball:? floatBall with PanResponder ?
- 優雅地使用TypeScript開發React Native應用
- react-navigation 5.x 最佳實踐
- React Native 專案架構面面觀
- React Native 整合 CodePush 指南
- 【譯】在 React Native TypeScript 專案中使用 defaultProps
- 【譯】在 React Native TypeScript 專案中使用 defaultProps
- 手摸手帶你封裝 React Native 富文字編輯器
- React Native 除錯最佳實踐|牛氣沖天新年徵文
聊聊崗位待遇
有一說一,React Native 包括 Flutter 在內,崗位比 Web 前端開發是要少很多的,但是這並不意味著不值得投資。相較於 Web 開發,跨端開發需要掌握更多的技能,入門更難一些。但是一般掌握了它,對應的薪資待遇也是很誘人的。
塗鴉跨端團隊大量招人
塗鴉智慧是全球領先的 IoT 雲平臺,連線品牌、OEM 廠商、開發者和連鎖零售商的智慧化需求,提供一站式人工智慧物聯網的 PaaS 級解決方案。並且涵蓋了硬體開發工具、全球雲、智慧商業平臺開發三方面,提供從技術到營銷渠道的全面生態賦能,打造世界領先的 IoT 雲平臺。
跨端團隊招 RN、Flutter、小程式等開發崗位,有興趣可加我微信(yang_jun_ning
),可幫忙提供簡歷諮詢、內推服務。
本文正在參加 掘金 3 月闖關活動,點選檢視 活動詳情