react native 包學不包會系列--認識react native

程式碼星空發表於2019-01-01

react native 是由Facebook推出,基於JavaScript框架和React庫來提高多平臺開發效率的一門語言。很好地填補了跨平臺開發的空缺,推出之後也是收到很多開發者的關注,目前使用的就是客戶端開發者跟前端開發者居多。接下來我們將會以更新一系列的react native文章,從認識到上手到立項到釋出到跑路【壞笑臉】,因為本人是前端開發,所以會以前端開發的視角來解析react native,在使用方面也是會重點以前端開發為主,結合ios與安裝的混合開發來實現一個完善的app。

看透react native

react native第一次進入公眾的視野是在2015年1月的react.js Conf上(想起我是在2017年9月分接觸的react native),隨後在同年的5月份,Facebook宣佈了react native專案在github開源。結果一天之內,就收穫了5000多顆星星,簡直就是當紅炸子雞,想我的github star能到5000,睡覺都能笑醒。

react native與react.js

那麼react native跟react.js什麼關係呢?莫不是同javascript與java的關係一樣?讓我們先來看下react官家給出的定義: react is a JavaScript library for building user interfaces react 是一個用於前端ui開發的javascript庫。react 何其他類似的前端框架相比,比如老牌的Backbone,google的angular以及尤大大以輕量級著稱的vue,react的大不同,就是提出了Virtual DOM 的設計,大大地提升了頁面渲染的銷量。 facebook將react的設計移植到了原生開發中,誕生了react + native結合的產物,即React Native。 簡單點說它們可以用二句話概括: 1.react nativ與react 使用了相同的開發語言和相同的設計理念 2.react native 是基於移動平臺,而react是基於瀏覽器。

react native的特點

1.Learn Once, Write Anywhere

這句話簡單明瞭地概括了React Naitve 的最大特點和優點。只要學習了react native 這一種開發方式(這裡的開發方式是包括平臺,語言和開發環境),就可以開發多個不同平臺的App。但是有些計算機畢業的同學是不是聽著這句話很耳熟呢,因為在java中很早就又提出類似的口號:Write Once, Run Anywhere。這二句話很相似也很容易混淆。react native的意思是降低學習成本,正對不同的平臺可能還需要單獨開發,而java的意思是隻要開發一次,就可以成功執行在不同的平臺和裝置上。目前react native 對安卓、ios的平臺支援已經做到很好,在之後可能還會支援window、Tizen等更多的移動平臺。而且React Native的大多陣列件是可以在多個平臺複用,所以學習了React Native之後,完全可以勝任多個平臺的開發任何,且不需要很高的額外學習成本,大大降低了開發成本。

簡單易學的開發語言

javascript不解釋

接近原生應用的效能和體驗

React Native 前二個優點,Hybrid App開發其實也同樣地具備,但是混合應用的開發方式在實際開發中存在著效能和提樣的先天不足,因為混合應用是在移動瀏覽器裡面嵌入html頁面,原生平臺的效能優勢展示就受到了限制。雖然混合應用也一直在優化與提高,但是目前階段還是無法與原生應用相媲美。而React Native雖然是用javascript語言開發,而且使用跟混合應用也很類似,但是其實React Native的實現機制卻完全不同,它的底層是以及原生平臺,所以React Native在效能與體驗上與原生應用可以達到大致一體的效果。對使用者來說,體驗可以做到無差別。

完善的生態系統

這個就不用解釋了 放幾個實用的地址: React Native官網 React Native中文網 掘金客戶端React Native模仿版 React Native學習資料彙總 js.coach React Native開源庫檢索網站

搭建React Native 開發環境

安裝JDK與AS SDK Tools

JSDK從JDK官網下載安裝即可

安裝Xcode

安裝Node.js

安裝React Native命令列工具

npm install -g react-native-cli

或者

cnpm install -g react-native-cli

安裝之後,執行react native -v檢查是否安裝成功 不知道這麼講是不是太簡單了,後期如果有需要還是出一個具體的安裝步驟,有截圖,有安裝結果的,其實我自己在搭建環境的過程中也有遇到一些問題,現在想起來,覺得不足為提。但是確實是很容易遇到的,並且React Native的環境搭建算是我遇到的比較複雜的環境搭建了,找個時間把電腦的環境都清了,重新搭建一次,遇到的問題也列出來,希望能對入門的朋友們優點幫助吧。

建立專案

react-native init myRN

建立一個名為myRN的專案,建立成功後開啟專案目錄我們來看下。 其中:

  • tests 工程的單元測試資料夾
  • android Android工程資料夾
  • ios ios工程資料夾
  • node_modules 存放依賴庫
  • index.android.js Android App 入口檔案
  • index.ios.js IOS App 入口檔案 package.json 工程配置檔案,前端人員都懂得它是幹嘛的

對於前端開發來說,我們的安卓與ios的訪問模組自然都是一樣的,所以這邊一個省力的方法建議大家,可以再建一個index.js,原生入口檔案再訪問這個檔案即可,不用一個模組要寫入二個檔案中。 未完待續。。。

相關文章