react native 是由Facebook推出，基于JavaScript框架和React庫來提高多平臺(tái)開發(fā)效率的一門語言。很好地填補(bǔ)了跨平臺(tái)開發(fā)的空缺，推出之后也是收到很多開發(fā)者的關(guān)注，目前使用的就是客戶端開發(fā)者跟前端開發(fā)者居多。接下來我們將會(huì)以更新一系列的react native文章，從認(rèn)識(shí)到上手到立項(xiàng)到發(fā)布到跑路【壞笑臉】，因?yàn)楸救耸乔岸碎_發(fā)，所以會(huì)以前端開發(fā)的視角來解析react native，在使用方面也是會(huì)重點(diǎn)以前端開發(fā)為主，結(jié)合ios與安裝的混合開發(fā)來實(shí)現(xiàn)一個(gè)完善的app。

看透react native

react native第一次進(jìn)入公眾的視野是在2015年1月的react.js Conf上（想起我是在2017年9月分接觸的react native），隨后在同年的5月份，Facebook宣布了react native項(xiàng)目在github開源。結(jié)果一天之內(nèi)，就收獲了5000多顆星星，簡(jiǎn)直就是當(dāng)紅炸子雞，想我的github star能到5000，睡覺都能笑醒。

react native與react.js

那么react native跟react.js什么關(guān)系呢？莫不是同javascript與java的關(guān)系一樣？讓我們先來看下react官家給出的定義： react is a JavaScript library for building user interfaces react 是一個(gè)用于前端ui開發(fā)的javascript庫。react 何其他類似的前端框架相比，比如老牌的Backbone，google的angular以及尤大大以輕量級(jí)著稱的vue，react的大不同，就是提出了Virtual DOM 的設(shè)計(jì)，大大地提升了頁面渲染的銷量。 facebook將react的設(shè)計(jì)移植到了原生開發(fā)中，誕生了react + native結(jié)合的產(chǎn)物，即React Native。 簡(jiǎn)單點(diǎn)說它們可以用二句話概括： 1.react nativ與react 使用了相同的開發(fā)語言和相同的設(shè)計(jì)理念 2.react native 是基于移動(dòng)平臺(tái)，而react是基于瀏覽器。

react native的特點(diǎn)

1.Learn Once, Write Anywhere

這句話簡(jiǎn)單明了地概括了React Naitve 的最大特點(diǎn)和優(yōu)點(diǎn)。只要學(xué)習(xí)了react native 這一種開發(fā)方式（這里的開發(fā)方式是包括平臺(tái)，語言和開發(fā)環(huán)境），就可以開發(fā)多個(gè)不同平臺(tái)的App。但是有些計(jì)算機(jī)畢業(yè)的同學(xué)是不是聽著這句話很耳熟呢，因?yàn)樵趈ava中很早就又提出類似的口號(hào)：Write Once， Run Anywhere。這二句話很相似也很容易混淆。react native的意思是降低學(xué)習(xí)成本，正對(duì)不同的平臺(tái)可能還需要單獨(dú)開發(fā)，而java的意思是只要開發(fā)一次，就可以成功運(yùn)行在不同的平臺(tái)和設(shè)備上。目前react native 對(duì)安卓、ios的平臺(tái)支持已經(jīng)做到很好，在之后可能還會(huì)支持window、Tizen等更多的移動(dòng)平臺(tái)。而且React Native的大多數(shù)組件是可以在多個(gè)平臺(tái)復(fù)用，所以學(xué)習(xí)了React Native之后，完全可以勝任多個(gè)平臺(tái)的開發(fā)任何，且不需要很高的額外學(xué)習(xí)成本，大大降低了開發(fā)成本。

簡(jiǎn)單易學(xué)的開發(fā)語言

javascript不解釋

接近原生應(yīng)用的性能和體驗(yàn)

React Native 前二個(gè)優(yōu)點(diǎn)，Hybrid App開發(fā)其實(shí)也同樣地具備,但是混合應(yīng)用的開發(fā)方式在實(shí)際開發(fā)中存在著性能和提樣的先天不足，因?yàn)榛旌蠎?yīng)用是在移動(dòng)瀏覽器里面嵌入html頁面，原生平臺(tái)的性能優(yōu)勢(shì)展示就受到了限制。雖然混合應(yīng)用也一直在優(yōu)化與提高，但是目前階段還是無法與原生應(yīng)用相媲美。而React Native雖然是用javascript語言開發(fā)，而且使用跟混合應(yīng)用也很類似，但是其實(shí)React Native的實(shí)現(xiàn)機(jī)制卻完全不同，它的底層是以及原生平臺(tái)，所以React Native在性能與體驗(yàn)上與原生應(yīng)用可以達(dá)到大致一體的效果。對(duì)用戶來說，體驗(yàn)可以做到無差別。

完善的生態(tài)系統(tǒng)

這個(gè)就不用解釋了 放幾個(gè)實(shí)用的地址： React Native官網(wǎng) React Native中文網(wǎng) 掘金客戶端React Native模仿版 React Native學(xué)習(xí)資料匯總 js.coach React Native開源庫檢索網(wǎng)站

搭建React Native 開發(fā)環(huán)境

安裝JDK與AS SDK Tools

JSDK從JDK官網(wǎng)下載安裝即可

安裝Xcode

安裝Node.js

安裝React Native命令行工具

npm install -g react-native-cli

或者

cnpm install -g react-native-cli

安裝之后，運(yùn)行react native -v檢查是否安裝成功 不知道這么講是不是太簡(jiǎn)單了，后期如果有需要還是出一個(gè)具體的安裝步驟，有截圖，有安裝結(jié)果的，其實(shí)我自己在搭建環(huán)境的過程中也有遇到一些問題，現(xiàn)在想起來，覺得不足為提。但是確實(shí)是很容易遇到的，并且React Native的環(huán)境搭建算是我遇到的比較復(fù)雜的環(huán)境搭建了，找個(gè)時(shí)間把電腦的環(huán)境都清了，重新搭建一次，遇到的問題也列出來，希望能對(duì)入門的朋友們優(yōu)點(diǎn)幫助吧。

創(chuàng)建項(xiàng)目

react-native init myRN

創(chuàng)建一個(gè)名為myRN的項(xiàng)目，創(chuàng)建成功后打開項(xiàng)目目錄我們來看下。 其中：

• tests 工程的單元測(cè)試文件夾
• android Android工程文件夾
• ios ios工程文件夾
• node_modules 存放依賴庫
• index.android.js Android App 入口文件
• index.ios.js IOS App 入口文件 package.json 工程配置文件，前端人員都懂得它是干嘛的

對(duì)于前端開發(fā)來說，我們的安卓與ios的訪問模塊自然都是一樣的，所以這邊一個(gè)省力的方法建議大家，可以再建一個(gè)index.js，原生入口文件再訪問這個(gè)文件即可，不用一個(gè)模塊要寫入二個(gè)文件中。 未完待續(xù)。。。

轉(zhuǎn)載于:https://juejin.im/post/5c2b269d518825282222b0a2

總結(jié)

以上是生活随笔為你收集整理的react native 包学不包会系列--认识react native的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。