是時候瞭解React Native了
隨著科技的發展,手機開發也在向好的方向不停的轉變。IOS和Android兩大手機操作橫空出世,稱霸江湖。我們每開發一個手機軟體最少都需要開發這兩個終端。
兩大作業系統都在不斷的提升完善,能力越來越強大,這對於我們開發者是好事,因為用智慧手機的使用者越來越多。
話天下大事,分久必合,合久必分。這句話對於移動開發也是一樣的。
這幾年來,移動應用開發者做夢都希望有一個能跨平臺的開發工具,讓他們不要把同一個移動應用使用不同的開發語言寫兩遍。但跨平臺開發工具的實現很難,直到Facebook開源了React Native.
React,React.js, React Native
要想學習React Native首先了解上面三個概念和之間的聯絡。
- React 是基礎框架,提供了一套基礎設計實現理念,並不能直接用來開發,就好比馬克思主義對於我黨的作用一樣。
- React.js 是在React理念的指導下產生的專門用來開發網頁的框架.與React同時出現和發展,React的相關概念都在React.js文件中。
- React Native 是用來開發移動應用。需要用到React概念,但是不需要React.js的東西。
預備知識
- 學習React Native開發需要了解基礎的JavaScript程式設計知識。如果有程式設計經驗的可以通過 慕課網提供的學習頁面http://www.imooc.com/learn/36 或者直接閱讀ECMAScript 6入門電子版
- 最好簡單瞭解一下Android或者IOS其中一門開發,因為React Native開發的功能偶爾還需要藉助原生程式碼實現,大家可以看一下我寫的愛上Android這本書瞭解下Android開發
React Native的特點
使用React Native開發,既擁有Native的良好人機互動體驗,又保留了React框架的開發效率。
一次學習,隨處編寫
一份程式碼同時支援IOS和Android兩個平臺在歷史上證明是非常困難的,所以React Native小組並沒有狂妄的喊出"Write once,run anywhere",而是提出了“Learn once,write anywhere”。使用RN可以為兩個作業系統開發應用程式,但不同的平臺上的程式碼根據平臺會有一些微小的區別,但開發思路是相同的。在UI開發上,RN差不多做到了"Write once,run anywhere"。
混合開發
React Native支援混合開發,大致分為三種情況。
- UI介面由React Native開發, 但UI事件處理由原生程式碼執行
- 將原來使用的原生程式碼實現的UI小部件包裝成React Native的自定義控制元件
- 應用介面在React Native開發的介面與原生程式碼開發的介面間進行切換,React Native的強項就是UI開發,在混合開發中,能用React Native開發的介面,優先用React Native開發.
優缺點
RN優點很明顯,
- 可以大大節省開發成本,百分之90多介面可以通過RN開發,一份程式碼可以適配Android和IOS.
- RN有獨特的UI實現框架,藉助元件化開發是團隊規模更容易進行調整,可以快速迭代專案.
- RN可以通過一些手段自動匹配不同螢幕大小的手機,再也不需要自己去計算檢視的大小和位置.
- RN具備高效的UI除錯.
RN也有一些缺點,不過相對於優點基本上可以忽略
- RN開發的程式記憶體消耗略大, 開發模式下開銷大幾十兆,釋出後差異不大, 目前手機基本上都有2G以上的記憶體, 幾十兆可以忽略不計了。
- 執行速度略慢, 不可否認,原生程式碼比RN執行速度略快, 顯示一個介面多一兩毫秒吧,正常的人根本感覺不到,如果你用不經過優化的原生程式碼反而不如RN.
- 安裝包比原生程式碼安裝包大,這點更可以忽略了, 現在手機什麼都缺就不缺空間.
React Native開發環境搭建
React Native可以在Mac,Linux,Windows上搭建, 其中如果開發IOS,必須在Mac上搭建。具體如何搭建可以參考React Native環境搭建
學習資料
React Native 官方文件中文版
React Native中文網
ECMAScript 6入門
更多精彩請關注微信公眾賬號likeDev
相關文章
- 是時候該瞭解一波Protocol Buffers了[Java]ProtocolJava
- 是時候該瞭解一波Protocol Buffers了[Android]ProtocolAndroid
- VS 2019要來了,是時候瞭解一下C# 8.0新功能C#
- 詳解 React NativeReact Native
- 2024, 是時候告別CentOS了CentOS
- 是時候扔掉 Postman 了,Apifox 真香!PostmanAPI
- 你的 ResNet 是時候更新了
- 對DevOps的九大誤解,是時候糾正了!dev
- [譯] 圖解 React Native圖解React Native
- [React Native]react-native-scrollabReact Native
- 【Android Adapter】是時候開啟Adapter新時代了AndroidAPT
- 是時候重新審視AB測試了
- 是時候放棄 el-form 元件了ORM元件
- 是時候瞭解一波虛擬機器的類載入機制虛擬機
- react-native第二彈來了!React
- 川普啟動美國AI計劃後,是時候瞭解美國眼中的「中國AI戰略」了AI
- 是時候學習真正的 spark 技術了Spark
- 6 歲!是時候重新認識下 Serverless 了Server
- 非智慧WAF,是時候轉身離場了
- 是時候為Spring Boot 3.0做準備了Spring Boot
- 6歲!是時候重新認識下Serverless了Server
- 是時候談談JavaScript物件導向了!(我們什麼時候更需要它)JavaScript物件
- React Native Icon方案:react-native-svgReact NativeSVG
- React Native日期時間選擇元件React Native元件
- 無伺服器時代:是時候做 Cloud Right 了 - Wardley伺服器Cloud
- 是時候來了解下 HTTPS 網站的部署了HTTP網站
- 《榮譽勳章》系列是時候重回戰場了
- 為什麼說是時候擁抱.NET CORE了?
- 還在學iOS?是時候學習Flutter了(二)iOSFlutter
- APK瘦身-是時候給App進行減負了APKAPP
- 是時候優雅的和NullPointException說再見了NullException
- 德勤:是時候認真對待資料了
- React Native轉web方案:react-native-webReact NativeWeb
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- 是時候從頭瞭解一下游戲化設計的基本要素
- react-native配置react-native-image-crop-pickerReact
- React Native選擇器元件-react-native-slidepickerReact Native元件IDE
- 平安AI護航,是時候來次教育升級了AI
- 是時候使用 Lumen 7 + API Resource 開發專案了!API