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

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，原生入口文件再訪問這個文件便可，不用一個模塊要寫入二個文件中。 未完待續。。。