react native 包学不包会系列--认识react native
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 三个定理
- 下一篇: 2019第一篇万字长文!30+家一线投资