一金蜀、簡(jiǎn)介
1、React-Native介紹
React Native (簡(jiǎn)稱RN)是Facebook于2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架茶宵，是Facebook早先開源的UI框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物页眯，目前支持iOS和安卓?jī)纱笃脚_(tái)。RN使用Javascript語言笛厦，類似于HTML的JSX，以及CSS來開發(fā)移動(dòng)應(yīng)用康栈，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動(dòng)應(yīng)用開發(fā)領(lǐng)域递递。
React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)喷橙，構(gòu)建世界一流的原生APP啥么。React Native著力于提高多平臺(tái)開發(fā)的開發(fā)效率 —— 僅需學(xué)習(xí)一次，編寫任何平臺(tái)贰逾。(Learn once, write anywhere)
2悬荣、React Native主要特性
支持原生iOS組件
React Native主張“Learn once, write everywhere”而非其他跨平臺(tái)工具一直宣揚(yáng)的“Write once, run everywhere”。通過React Native疙剑，開發(fā)者可以使用React-Native 提供的組件氯迂，讓應(yīng)用界面在其他平臺(tái)上亦能保持始終如一的外觀、風(fēng)格言缤。
異步執(zhí)行
JavaScript應(yīng)用代碼和原生平臺(tái)之間所有的操作都采用異步執(zhí)行模式嚼蚀，原生模塊使用額外線程，開發(fā)者可以解碼主線程圖像管挟、后臺(tái)保存至磁盤轿曙、無須顧忌UI等諸多因素直接度量文本設(shè)計(jì)布局。
觸摸處理
React Native引入了一個(gè)類似于iOS上Responder Chain響應(yīng)鏈?zhǔn)录幚頇C(jī)制的響應(yīng)體系僻孝，并基于此為開發(fā)者提供了諸如TouchableHighlight等更高級(jí)的組件导帝。
引入 Flexbox 布局模型和樣式
Flexbox布局模型有利于構(gòu)建常見的UI布局，如stacked和nested boxes布局穿铆。React Native還支持常見的Web樣式您单，如fontWeight、font-size等荞雏。樣式表（StyleSheet）抽象提供了一種優(yōu)化機(jī)制來聲明組件所用到的所有樣式和布局虐秦；
具有 Polyfills 功能
Polyfills功能是的開發(fā)者編寫單獨(dú)應(yīng)用的代碼而不用擔(dān)心其他瀏覽器原生是不是支持。React Native專注于改變?cè)噲D（Views）代碼編寫的方式凤优，開發(fā)者能夠使用npm安裝JavaScript Library悦陋，并將這些Library融入React Native，如 XMLHttpRequest别洪、window.requestAnimationFrame等
具有較強(qiáng)的可擴(kuò)展性
設(shè)計(jì)React Native主要是為了使得開發(fā)者使用常規(guī)的原生視圖組件擴(kuò)展和模塊就可以開發(fā)出一個(gè)完整的應(yīng)用叨恨，開發(fā)者能夠復(fù)用已經(jīng)構(gòu)建的任何應(yīng)用或者組件，并且還能夠引入自己喜愛的原生Library挖垛。
3痒钝、為什么要用 React-Native
目前主流的應(yīng)用大體分成如下幾類：Native App, Web App 秉颗、 Hybrid App 與 React-Native App
App.png
Native App
即原生開發(fā)模式,開發(fā)出來的是原生程序,不同平臺(tái)上,Android和iOS的開發(fā)方法不同,開發(fā)出來的是一個(gè)獨(dú)立的APP,能發(fā)布應(yīng)用商店,有如下優(yōu)點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn)：
直接依托于操作系統(tǒng),交互性最強(qiáng),性能最好
功能最為強(qiáng)大,特別是在與系統(tǒng)交互中,幾乎所有功能都能實(shí)現(xiàn)
缺點(diǎn)：
開發(fā)成本高送矩，無法跨平臺(tái)
升級(jí)困難
維護(hù)成本高
Web App
即移動(dòng)端的網(wǎng)站,將頁面部署在服務(wù)器上,然后用戶使用各大瀏覽器訪問,不是獨(dú)立APP,無法安裝和發(fā)布Web網(wǎng)站一般分兩種,MPA(Multi-page Application)和SPA(Single-page Application)蚕甥。而Web App一般泛指后面的SPA形式開發(fā)出的網(wǎng)站(因?yàn)榭梢阅７乱恍〢PP的特性),有如下優(yōu)點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn)：
開發(fā)成本低,可以跨平臺(tái),調(diào)試方便
版本升級(jí)容易
維護(hù)成本低
無需安裝 App栋荸，不占用手機(jī)內(nèi)存(通過瀏覽器即可訪問)
缺點(diǎn)：
性能低,用戶體驗(yàn)差
依賴于網(wǎng)絡(luò),頁面訪問速度慢,耗費(fèi)流量
功能受限,大量功能無法實(shí)現(xiàn)(無法調(diào)用原生 API)
臨時(shí)性入口,用戶留存率低
Hybrid App
即混合開發(fā),也就是半原生半Web的開發(fā)模式,有跨平臺(tái)效果,實(shí)質(zhì)最終發(fā)布的仍然是獨(dú)立的原生APP(各種的平臺(tái)有各種的SDK)菇怀，這是一種 Native App 和 Web App 折中的方案，保留了 Native App 和 Web App 的優(yōu)點(diǎn)晌块。
優(yōu)點(diǎn)：
開發(fā)成本較低,可以跨平臺(tái),調(diào)試方便
維護(hù)成本低,功能可復(fù)用
更新較為自由（只下載資源不更新 apk ）
學(xué)習(xí)成本較低(前端開發(fā)人員不用學(xué)習(xí)底層 api)
功能更加完善,性能和體驗(yàn)要比起web app 好
缺點(diǎn)：
相比原生,性能仍然有較大損耗
不適用于交互性較強(qiáng)的app（主要適用于新聞閱讀類與信息展示類的 APP）
React Native APP
Facebook發(fā)起的開源的一套新的APP開發(fā)方案,Facebook在當(dāng)初深入研究Hybrid開發(fā)后,覺得這種模式有先天的缺陷,所以果斷放棄,轉(zhuǎn)而自行研究,后來推出了自己的“React Native”方案,不同于H5,也不同于原生,更像是用JS寫出原生應(yīng)用,有如下優(yōu)點(diǎn)和缺點(diǎn)
優(yōu)點(diǎn)：
開發(fā)成本在 Hybrid 和 Native 開發(fā)之間 爱沟，大部分代碼還是可復(fù)用的，
性能體驗(yàn)高于Hybrid匆背，性能相比原生差別不大
技術(shù)日益成熟呼伸，發(fā)展迅猛
缺點(diǎn)：
門檻相對(duì) Web App 與 Hybrid App 來說相對(duì)高一點(diǎn)（也需要了解 Native 層）
不同開發(fā)模式的對(duì)比：
開發(fā)模式對(duì)比
4、React-Native 框架簡(jiǎn)單描述
rn框架.png
說明：
React：也就是在不同平臺(tái)上編寫基于React的代碼钝尸，“Learn once, write anywhere”括享。
Virtual DOM：相對(duì)Browser環(huán)境下的DOM（文檔對(duì)象模型）而言，Virtual DOM是DOM在內(nèi)存中的一種輕量級(jí)表達(dá)方式珍促，可以通過不同的渲染引擎生成不同平臺(tái)下的UI铃辖，JS和Native之間通過Bridge通信。
Web/iOs/Android： 不同的平臺(tái)
二猪叙、環(huán)境搭建
因?yàn)?React-Native 的開發(fā)也需要 Android 開發(fā)環(huán)境娇斩，這里不在介紹，只介紹 React-Native 部分沐悦。Android 開發(fā)環(huán)境搭建可以參考其他資料成洗。
1、Android 開發(fā)環(huán)境搭建
2藏否、Node.js 安裝
官網(wǎng)地址：https://nodejs.org/zh-cn/download/
nodejs.png
開始安裝：
install.png
安裝完成：
image.png
Windows 下通過 cmd 或者 PowerShell 查看 Node.js 版本：
image.png
出現(xiàn)版本號(hào)瓶殃，則說明安裝成功。
當(dāng)安裝完 Node.js 后副签，NPM 也會(huì)一同被安裝遥椿，NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題淆储，常見的使用場(chǎng)景有以下幾種：
允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用冠场。
允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用本砰。
npm.png
3碴裙、安裝 react-native-cli
命令行輸入如下命令安裝 react-native-cli
npm install -g react-native-cli
安裝完成后，通過 react-native-cli -v 查看版本，確定是否安裝成功
rn.png
三舔株、初始化項(xiàng)目
1莺琳、初始化項(xiàng)目
到指定目錄下，通過命令行初始化一個(gè)項(xiàng)目：
react-nativeinit NewProject
隨后開始初始化項(xiàng)目载慈，下載資源：
image.png
當(dāng)項(xiàng)目初始化完成后惭等，將在我們指定的文件夾下生成一個(gè)新的 React-Native 項(xiàng)目，項(xiàng)目名稱為： NewProject办铡，進(jìn)入項(xiàng)目辞做，項(xiàng)目的目錄結(jié)構(gòu)如下：
image.png
說明：
android: Android 工程源代碼，可以通過 Android Studio 打開寡具。
ios: ios 項(xiàng)目工程源代碼秤茅，可以通過 xcode 打開。
node_modules: react-native 工程用到的模塊晒杈。
App.js 是 react-native 工程的主源碼文件嫂伞，入口文件孔厉，相當(dāng)于 html 中的 index.html拯钻。
package.json: 主工程描述文件。
這些是我們接觸最多比較重要的一些文件或文件夾撰豺。
2粪般、運(yùn)行項(xiàng)目
初始化項(xiàng)目之后，就可以運(yùn)行項(xiàng)目了污桦。在項(xiàng)目運(yùn)行之前亩歹，確保配置了 Android 開發(fā)環(huán)境，并且命令行可以運(yùn)行 adb 命令凡橱，adb 在 Android SDK 的 platform-tools 文件夾下小作，需要手動(dòng)添加至環(huán)境變量。
image.png
USB 連接手機(jī)（手機(jī)需要開啟開發(fā)者選項(xiàng)和 USB 調(diào)試 ）稼钩，命令行輸入顾稀，adb devices:
image.png
當(dāng)看到有 device 時(shí)，說明手機(jī)連接成功坝撑，adb 可用静秆。
接下來到項(xiàng)目根目錄下，通過輸入如下命令來運(yùn)行項(xiàng)目：
react-nativerun-android
image.png
輸入命令后巡李，項(xiàng)目開始初始化運(yùn)行抚笔，運(yùn)行過程中會(huì)打開一個(gè) node 服務(wù)窗口，如下所示：
image.png
有這個(gè) node 窗口可以看到侨拦，電腦是通過 8081 這個(gè)端口來調(diào)試 react-native 應(yīng)用的殊橙。
這個(gè)過程可能會(huì)很慢，因?yàn)?react-native 需要 gradle 這個(gè)文件，下載會(huì)很慢膨蛮，我們可以手動(dòng)下載這個(gè)文件螃概，版本需要和命令行中出現(xiàn)的那個(gè)版本一致，然后把這個(gè) gradle 的 壓縮文件放到 c:\user\user.gradle\wrapper\dists\gradle-3.5.1-all\42vjebfdws9pjts3l4bouoq0p 下鸽疾，名稱可能不一致吊洼，和自己的對(duì)應(yīng)上就可以。
這里?可以下載到所有版本的 gradle制肮，如果不能下載冒窍，可以到網(wǎng)上找其他的資源。
下載完成后豺鼻，放到指定目錄下：
image.png
然后重新輸入命令 react-native run-android 來初始化運(yùn)行項(xiàng)目综液，程序首先會(huì)解壓 gradle 壓縮文件，第一次初始化可能需要一點(diǎn)時(shí)間：
image.png
初始化完成后儒飒，項(xiàng)目運(yùn)行成功谬莹，可以在手機(jī)上看到如下界面：
rn.png
至此，react-native 環(huán)境搭建完成桩了，初始化項(xiàng)目成功附帽。
四、常見錯(cuò)誤
1井誉、沒有配置 Android 開發(fā)環(huán)境
當(dāng)?shù)谝淮屋斎?react-native run-android 運(yùn)行是蕉扮，出現(xiàn)如下錯(cuò)誤：
image.png
表明程序沒有找到 sdk 路徑，首先確定是否配置了 Andorid 開發(fā)環(huán)境颗圣，然后檢查 項(xiàng)目中 Android 文件夾下是否有 local.properties 這個(gè)文件喳钟，如果有，確定 sdk 路徑正確在岂，如果沒有新建這個(gè)文件奔则，里面定義 sdk 的路徑為如下形式（改成自己的）：
dk.dir =/Users/USERNAME/Library/Android/sdk
2、第一次運(yùn)行出行紅屏蔽午，error code:500
error.png
可能是版本的原因易茬，可以通過如下命令安裝指定版本并更新：
npminstall–savereact-native@0.44.0react-native upgrade
然后修改 項(xiàng)目根目錄下的 package.json 為如下：
{"name":"NewProjet","version":"0.0.1","private":true,"scripts": {"start":"node node_modules/react-native/local-cli/cli.js start","test":"jest"},"dependencies": {"babel-preset-react-native":"^4.0.0","react":"16.4.1","react-native":"^0.55.4"},"devDependencies": {"babel-jest":"23.4.2","jest":"23.4.2","react-test-renderer":"16.4.1"},"jest": {"preset":"react-native"}}
接著刪除項(xiàng)目根目錄下的 node_modules 文件夾，刪除之后祠丝，通過 npm install 重新下載一下依賴包：
npm install
image.png
3疾呻、沒有啟動(dòng)服務(wù)
當(dāng)出現(xiàn)如下界面是，表明沒有啟動(dòng) react-native 服務(wù)
image.png
首先確定自己的手機(jī)通過 usb 連接上電腦写半，并且 8081 端口可用岸蜗，adb 可用，可以通過如下命令手動(dòng)啟動(dòng)服務(wù)叠蝇，運(yùn)行項(xiàng)目：
react-nativestartadb? reverse tcp:8081tcp:8081react-nativerun-android:
4璃岳、React Native unable to load script from assets index.android.bundle on windows
當(dāng)運(yùn)行項(xiàng)目，手機(jī)紅屏報(bào)錯(cuò)，錯(cuò)誤信息如下：
Unable to load script from assets index.android.bundle on windows
出現(xiàn)這個(gè)錯(cuò)誤铃慷，首先還是確定自己的手機(jī)連接上了電腦单芜，如果是無線調(diào)試的話，需要設(shè)置 ip 和 端口犁柜，步驟如下：
搖晃手機(jī)洲鸠，顯示菜單 =》 點(diǎn)擊Dev Settings =》 點(diǎn)擊Debug server host & port for device =》 設(shè)置IP和端口（ex:192.168.0.20:8081）
如果是通過 USB 調(diào)試的話，可能是因?yàn)闆]有找到assets下文件馋缅，需要手動(dòng)創(chuàng)建并設(shè)置：
1扒腕、首先手動(dòng)在\android\app\src\main下建立一個(gè)assets文件夾
2、然后cmd 進(jìn)入項(xiàng)目的根目錄下執(zhí)行：
react-nativebundle --platform Android --devfalse--entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
或者
react-nativebundle --platform android --devfalse--entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
這里到底是 index.android.js 還是 index.js 需要看自己項(xiàng)目根目錄下的那個(gè)文件是什么萤悴，對(duì)應(yīng)上就行了瘾腰。
如果遇到其他問題，就需要自己查閱資料解決了覆履。
參考：
https://my.oschina.net/fileoptions/blog/897969
http://www.reibang.com/writer#/notebooks/28242347/notes/31851576/preview
