學(xué)習(xí)一次，隨處書(shū)寫(xiě)。(以下文字來(lái)自各大網(wǎng)上資料整理而來(lái)，侵刪！)

概述

使用React為Android和iOS創(chuàng)建本機(jī)應(yīng)用

React Native將本機(jī)開(kāi)發(fā)的最佳部分與React(用于構(gòu)建用戶界面的一流JavaScript庫(kù))結(jié)合在一起。 少用或多用。您現(xiàn)在可以在現(xiàn)有的Android和iOS項(xiàng)目中使用React Native，也可以從頭開(kāi)始創(chuàng)建一個(gè)全新的應(yīng)用程序。

用JavaScript編寫(xiě)-使用本機(jī)代碼呈現(xiàn)

React原語(yǔ)渲染到本機(jī)平臺(tái)UI，這意味著您的應(yīng)用程序使用與其他應(yīng)用程序相同的本機(jī)平臺(tái)API。 許多平臺(tái)，一個(gè)React。創(chuàng)建特定于平臺(tái)的組件版本，以便單個(gè)代碼庫(kù)可以跨平臺(tái)共享代碼。使用React Native，一個(gè)團(tuán)隊(duì)可以維護(hù)兩個(gè)平臺(tái)并共享一種通用技術(shù)-React。

面向所有人的原生開(kāi)發(fā)

React Native可讓您創(chuàng)建真正的本機(jī)應(yīng)用程序，而不會(huì)影響用戶的體驗(yàn)。它提供了一套核心的像與平臺(tái)無(wú)關(guān)本地組件的View，Text和Image直接映射到該平臺(tái)的原生UI積木。

無(wú)縫跨平臺(tái)

React組件包裝了現(xiàn)有的本機(jī)代碼，并通過(guò)React的聲明性UI范例和JavaScript與本機(jī)API進(jìn)行交互。這樣就可以為全新的開(kāi)發(fā)人員團(tuán)隊(duì)進(jìn)行本機(jī)應(yīng)用程序開(kāi)發(fā)，并且可以讓現(xiàn)有的本機(jī)團(tuán)隊(duì)更快地工作。

快速刷新

保存后立即查看更改。借助JavaScript的強(qiáng)大功能，React Native可讓您以閃電般的速度進(jìn)行迭代。無(wú)需等待本地構(gòu)建完成。保存，查看，重復(fù)。

會(huì)談

React Native團(tuán)隊(duì)的成員經(jīng)常在各種會(huì)議上發(fā)表演講。您可以在Twitter上關(guān)注React Native團(tuán)隊(duì)的最新消息

Facebook支持，社區(qū)驅(qū)動(dòng)

Facebook在2015年發(fā)布了React Native，并一直保持至今。 在2018年，React Native 在GitHub中任何存儲(chǔ)庫(kù)的貢獻(xiàn)者數(shù)量中排名第二。今天，React Native得到了來(lái)自世界各地的個(gè)人和公司的支持，包括Callstack，Expo，Infinite Red，Microsoft和Software Mansion。 我們的社區(qū)一直在運(yùn)送令人興奮的新項(xiàng)目，并通過(guò)諸如React Native Windows和React Native Web之類的倉(cāng)庫(kù)來(lái)探索Android和iOS以外的平臺(tái)。

誰(shuí)在使用React Native？

從成熟的《財(cái)富》 500強(qiáng)公司到熱門(mén)的新興創(chuàng)業(yè)公司，成千上萬(wàn)的應(yīng)用程序都在使用React Native。如果您好奇使用React Native可以完成什么，請(qǐng)查看這些React Native官方展示柜！

與Flutter優(yōu)缺對(duì)比

優(yōu)勢(shì)熱重裝=快速編碼。

本質(zhì)上與Flutter具有相同的功能。 熱重載允許開(kāi)發(fā)人員將新代碼直接注入正在運(yùn)行的應(yīng)用程序中，從而加快了開(kāi)發(fā)過(guò)程。因此，開(kāi)發(fā)人員可以立即看到更改，而無(wú)需重建應(yīng)用程序。 熱重載還保留了應(yīng)用程序的狀態(tài)，避免了在完全重載期間丟失它的風(fēng)險(xiǎn)(在基于狀態(tài)的框架中這是一項(xiàng)關(guān)鍵優(yōu)勢(shì))，從而進(jìn)一步加快了應(yīng)用程序的開(kāi)發(fā)速度。

一個(gè)代碼庫(kù)，兩個(gè)移動(dòng)平臺(tái)(以及更多！)。

與Flutter完全相同：編寫(xiě)單個(gè)代碼庫(kù)為2個(gè)應(yīng)用程序提供動(dòng)力-涵蓋Android和iOS平臺(tái)。 更妙的是，JavaScript通過(guò)與Web應(yīng)用程序共享代碼，在編寫(xiě)跨平臺(tái)應(yīng)用程序時(shí)為您提供了幫助。這是通過(guò)創(chuàng)建可編譯為目標(biāo)平臺(tái)的抽象組件來(lái)完成的。

它使用一種流行的語(yǔ)言-JavaScript。

React Native使用JavaScript：許多開(kāi)發(fā)人員都熟悉的一種編程語(yǔ)言(盡管Dart仍然不那么廣為人知或使用)。而且，如果您是喜歡靜態(tài)類型編程語(yǔ)言的開(kāi)發(fā)人員，則甚至可以使用TypeScript(JavaScript子集)。

開(kāi)發(fā)者的選擇自由

React Native使開(kāi)發(fā)人員可以構(gòu)建跨平臺(tái)應(yīng)用程序；不多不少 優(yōu)點(diǎn)是React Native 允許開(kāi)發(fā)人員精確地決定他們要使用什么解決方案。兩者都根據(jù)項(xiàng)目的要求以及開(kāi)發(fā)人員的喜好而定。 假設(shè)，如果開(kāi)發(fā)人員需要決定如何處理全局狀態(tài)(如何存儲(chǔ)和管理應(yīng)用程序中許多組件中使用的數(shù)據(jù))，選擇路由器庫(kù)或在JavaScript和TypeScript之間進(jìn)行選擇–他們可以決定是否d傾向于使用自定義的UI庫(kù)，或者自己編寫(xiě)。

相對(duì)成熟度。

官方的React Native版本是4年前發(fā)布的，因此Facebook團(tuán)隊(duì)有足夠的時(shí)間來(lái)穩(wěn)定API，并專注于解決問(wèn)題和解決問(wèn)題。現(xiàn)在，他們正在努力進(jìn)行一些令人興奮的改進(jìn)-例如減小應(yīng)用程序的大小。

活躍而廣闊的社區(qū)。

React Native有龐大的開(kāi)發(fā)者社區(qū)。不僅如此，還有無(wú)數(shù)的教程，庫(kù)和UI框架使學(xué)習(xí)該技術(shù)變得容易，并且可以快速，輕松地進(jìn)行開(kāi)發(fā)。

對(duì)React開(kāi)發(fā)人員易于學(xué)習(xí)

我們列表中的這一優(yōu)勢(shì)非常針對(duì)React開(kāi)發(fā)人員。如果您具有Web開(kāi)發(fā)的背景并且已經(jīng)使用了流行的React解決方案，則可以輕松地使用React Native，而無(wú)需學(xué)習(xí)新的庫(kù)。您可以使用相同的庫(kù)，工具和模式。

最多減少50％的測(cè)試。

我們可以減少大約50％的自動(dòng)化測(cè)試，因?yàn)槲覀兛梢詣?chuàng)建相同的測(cè)試以在兩個(gè)平臺(tái)上運(yùn)行，從而減少了對(duì)質(zhì)量檢查團(tuán)隊(duì)的需求。它看起來(lái)與Flutter應(yīng)用程序開(kāi)發(fā)中的相同-我們?cè)诖颂庍M(jìn)行了描述。

缺點(diǎn)它不是真正的本地人。

像任何跨平臺(tái)解決方案一樣，UI體驗(yàn)和性能都不會(huì)與本機(jī)應(yīng)用程序中的完全相同，而是與之接近。但是，與Flutter相比，使用React Native更容易獲得“自然感覺(jué)”。如果您希望Flutter應(yīng)用程序具有本機(jī)組件，則需要進(jìn)行其他工作。

開(kāi)箱即用的零件少。

React Native僅支持開(kāi)箱即用的基本組件(其中許多組件適用于開(kāi)箱即用的平臺(tái)，例如按鈕，加載指示器或滑塊)。 就像我們?cè)诒径沃兴f(shuō)的那樣，外部存儲(chǔ)庫(kù)中有許多其他的React Native組件。開(kāi)發(fā)人員可以在項(xiàng)目中使用它們，但這需要額外的精力和時(shí)間。 另一方面，Flutter旨在支持開(kāi)箱即用的Material Design，因此該框架支持更多的小部件。節(jié)省時(shí)間。使用Flutter的開(kāi)發(fā)人員可以使用易于定制且跨平臺(tái)一致的預(yù)制窗口小部件來(lái)創(chuàng)建大多數(shù)視圖。

開(kāi)發(fā)者的選擇自由。

開(kāi)發(fā)人員創(chuàng)建新項(xiàng)目后，他們需要確定要使用哪個(gè)導(dǎo)航包以及哪個(gè)全局狀態(tài)管理。了解每個(gè)解決方案的細(xì)微差別，最終決定要用于項(xiàng)目的最佳解決方案，可能需要花費(fèi)大量時(shí)間。

很多廢棄的包裹。

React Native擁有大量的庫(kù)。不幸的是，它們太多是低質(zhì)量的。或完全被遺棄。 Dan Abramov建議檢查存儲(chǔ)庫(kù)中的問(wèn)題數(shù)量和提交頻率，以防止使用廢棄的程序包。 在他關(guān)于“您對(duì)React Native有什么不滿意？”的討論摘要中，閱讀有關(guān)React Native當(dāng)前形狀的問(wèn)題和局限性的更多信息。

脆弱的用戶界面。

React Native在后臺(tái)使用本機(jī)組件這一事實(shí)應(yīng)該使您充滿信心，每次OS UI更新后，您的應(yīng)用程序組件也將立即升級(jí)。 就是說(shuō)– 這可能會(huì)破壞應(yīng)用程序的用戶界面，但這種情況很少發(fā)生。 更糟糕的是，如果更新導(dǎo)致本機(jī)組件API發(fā)生某些更改，更新將變得更加危險(xiǎn)。好消息？這種事件很少發(fā)生。而就Flutter而言(由于框架自行重新創(chuàng)建本機(jī)組件的方式)，應(yīng)用程序UI更加穩(wěn)定。

應(yīng)用比本地應(yīng)用更大。

用React Native編寫(xiě)的應(yīng)用程序必須能夠運(yùn)行Javascript代碼(JavaScript虛擬機(jī))。Android默認(rèn)情況下不具有此功能-意味著應(yīng)用程序需要包括一個(gè)支持JavaScript代碼的庫(kù)，從而導(dǎo)致應(yīng)用程序比其本機(jī)Android同類產(chǎn)品更大。 使用React Native制作的iOS應(yīng)用程序不會(huì)出現(xiàn)此問(wèn)題，但它們通常仍比本地應(yīng)用程序大。好消息？如前所述，React Native團(tuán)隊(duì)正在努力減少其應(yīng)用程序的大小,小型輕巧的JavaScript引擎。

RN環(huán)境配置

Option:Expo CLI快速入門(mén)假設(shè)您已安裝Node 10 LTS或更高版本，則可以使用npm安裝Expo CLI命令行實(shí)用程序：npm install -g expo-cli

然后運(yùn)行以下命令來(lái)創(chuàng)建一個(gè)名為“ AwesomeProject”的新React Native項(xiàng)目，如果卡住了,則可能墻的原因或者網(wǎng)速問(wèn)題：

expo init AwesomeProject # 創(chuàng)建項(xiàng)目

cd AwesomeProject

npm start || expo start # 運(yùn)行項(xiàng)目運(yùn)行您的React Native應(yīng)用程序 在iOS或Android手機(jī)上安裝Expo客戶端應(yīng)用程序，然后連接到與計(jì)算機(jī)相同的無(wú)線網(wǎng)絡(luò)。在Android上，使用Expo應(yīng)用程序從終端掃描QR碼以打開(kāi)您的項(xiàng)目。在iOS上，按照屏幕上的說(shuō)明獲取鏈接。

Option:React Native CLI快速入門(mén)安裝Node，Python2，JDK(window)。

我們建議通過(guò)Chocolatey(適用于Windows的流行軟件包管理器)安裝Node和Python2 。React Native還需要Java SE Development Kit(JDK)和Python 2 的最新版本。兩者都可以使用Chocolatey安裝。打開(kāi)管理員命令提示符(右鍵單擊命令提示符，然后選擇“以管理員身份運(yùn)行”)，然后運(yùn)行以下命令：choco install -y nodejs.install python2 jdk8.如果您已經(jīng)在系統(tǒng)上安裝了Node，請(qǐng)確保它是Node 8.3或更高版本。如果您的系統(tǒng)上已經(jīng)有JDK，請(qǐng)確保它是版本8或更高版本。您可以在Node的Downloads頁(yè)面上找到其他安裝選項(xiàng)。

安裝React Native CLI。

Node隨附npm，可讓您安裝React Native命令行界面。 在命令提示符或外殼程序中運(yùn)行以下命令：npm install -g react-native-cli

Android開(kāi)發(fā)環(huán)境

如果您不熟悉Android開(kāi)發(fā)，則設(shè)置開(kāi)發(fā)環(huán)境可能會(huì)有些乏味。如果您已經(jīng)熟悉Android開(kāi)發(fā)，則可能需要配置一些內(nèi)容。無(wú)論哪種情況，請(qǐng)確保仔細(xì)遵循以下幾個(gè)步驟。

1.安裝Android Studio 下載并安裝Android Studio。當(dāng)提示您選擇安裝類型時(shí)，請(qǐng)選擇“自定義”設(shè)置。確保選中以下所有框旁邊的框：Android SDK

Android SDK Platform

Performance (Intel ? HAXM)(有關(guān)AMD，請(qǐng)參見(jiàn)此處)

Android Virtual Device

然后，單擊“下一步”以安裝所有這些組件。設(shè)置完成后，將顯示“歡迎”屏幕，請(qǐng)繼續(xù)執(zhí)行下一步。

2.安裝Android SDK。Android Studio默認(rèn)情況下會(huì)安裝最新的Android SDK。但是，使用本機(jī)代碼構(gòu)建React Native應(yīng)用程序Android 9 (Pie)特別需要SDK。

3.配置ANDROID_HOME環(huán)境變量。React Native工具需要設(shè)置一些環(huán)境變量，以便使用本機(jī)代碼構(gòu)建應(yīng)用程序。 4.將平臺(tái)工具添加到Path。在Windows控制面板中的“ 系統(tǒng)和安全性”下，打開(kāi)“系統(tǒng)”窗格，然后單擊“ 更改設(shè)置...”。打開(kāi)“ 高級(jí)”選項(xiàng)卡，然后單擊“ 環(huán)境變量...”。選擇路徑變量，然后單擊編輯。單擊“ 新建”，然后將“平臺(tái)工具”的路徑添加到列表中。

RN 基本命令行操作

# 執(zhí)行cli命令最好在管理員模式下運(yùn)行不然會(huì)引發(fā)其它錯(cuò)誤，設(shè)置為admin權(quán)限后如果還報(bào)錯(cuò)可重啟電腦再嘗試下

react-native init NameProject # 創(chuàng)建RN項(xiàng)目

react-native init NameProject --version X.XX.X # 使用特定版本

react-native init NameProject --template typescript # 創(chuàng)建RN TS項(xiàng)目

expo init NameProject # 也可以用expo

react-native run-android # 開(kāi)發(fā)環(huán)境下運(yùn)行RN項(xiàng)目(android)

react-native run-android --variant=release # 測(cè)試應(yīng)用的發(fā)布版本,設(shè)置簽名后，此選項(xiàng)才可用

reqact-native link xxx # 將第三方庫(kù)與原生進(jìn)行關(guān)聯(lián)如果發(fā)生錯(cuò)誤使用gradlew clean清理下

adb shell input keyevent 82 # 利用adb工具命令式打開(kāi)控制臺(tái)選項(xiàng)

adb reverse tcp:8081 tcp:8081 # 命令提示符下，然后重新運(yùn)行項(xiàng)目

adb kill-server # 關(guān)閉adb服務(wù)

adb root # 重新啟動(dòng)root權(quán)限的adb服務(wù)

rm -f r $TMPDIR/react-* #重置打包程序緩存

watchman watch-del-all # 清除守望者手表

gradlew clean # 清理構(gòu)建android文件

gradlew bundleRelease # 生成(Google Play)APK,會(huì)將運(yùn)行您的應(yīng)用程序所需的所有JavaScript捆綁到AAB

gradlew assembleDebug # 編譯并打Debug包

gradlew assembleRelease # 編譯并打Release的包

npm cache clean --force # npm清除包緩存

yarn cache clean # yarn清除包緩存

# 環(huán)境遇到的問(wèn)題

# bug描述：Starting a Gradle Daemon, 1 busy and 6 stopped Daemons could not be reused, use --status for details

# 解決思路：停止運(yùn)行Daemon進(jìn)程

gradle --stop # Gradle會(huì)殺死任何閑置了3個(gè)小時(shí)或更長(zhǎng)時(shí)間的守護(hù)程序，因此您不必?fù)?dān)心手動(dòng)清理它們。

gradle --status # 停止守護(hù)程序后，可查看下?tīng)顟B(tài)創(chuàng)建typescript項(xiàng)目 的時(shí)候可能會(huì)報(bào)錯(cuò)，具體詳情可點(diǎn)擊此處查看即可。

上面出現(xiàn)的程序名gradlew需要特別說(shuō)明下，說(shuō)起gradlew就要聊聊gradle.介紹簡(jiǎn)單來(lái)說(shuō)就是gradle會(huì)快速迭代版本，如果合作開(kāi)發(fā)項(xiàng)目會(huì)導(dǎo)致成員自己下載gradle，導(dǎo)致版本不一，從而手忙腳亂，所以干脆包裝起來(lái)，統(tǒng)一。因?yàn)間radle處于快速迭代階段，經(jīng)常發(fā)布新版本，如果我們的項(xiàng)目直接去引用，那么更改版本等會(huì)變得無(wú)比麻煩。而且每個(gè)項(xiàng)目又有可能用不一樣的gradle版本，這樣去手動(dòng)配置每一個(gè)項(xiàng)目對(duì)應(yīng)的gradle版本就會(huì)變得麻煩；所以需要包裝，引入gradle-wrapper，通過(guò)讀取配置文件中g(shù)radle的版本，為每個(gè)項(xiàng)目自動(dòng)的下載和配置gradle，就是這么簡(jiǎn)單。我們便不用關(guān)心如何去下載gradle,如何去配置進(jìn)項(xiàng)目來(lái)。下面一張圖對(duì)gradle與RN的關(guān)系。

通過(guò)gradle wrapper命令就可以愉快的gradlew了。

RN項(xiàng)目基本所需庫(kù)react-navigation React Navigation 源于 React Native 社區(qū)對(duì)一個(gè)可擴(kuò)展且易于使用的導(dǎo)航/路由系統(tǒng)解決方案的需求，它完全使用 JavaScript 編寫(xiě)。

redux 全局狀態(tài)管理器，解決組件數(shù)據(jù)通信問(wèn)題。

react-native-vector-icons icon圖標(biāo)容器，該庫(kù)自帶字體圖標(biāo)，也可自定義圖標(biāo)文件。

fetch 與后端通信ajax在這里推薦最新版的apifetch。

react-native-community/async-storage 本地存儲(chǔ)默認(rèn)是不會(huì)帶的，需要用該庫(kù)進(jìn)行操作，該語(yǔ)法糖與web的localstorage并無(wú)差別。

react-devtools 對(duì)react-native界面的dom進(jìn)行調(diào)試。

react-native-debugger 對(duì)react-native程序的桌面調(diào)試工具。

react-native-config 解決不同環(huán)境(開(kāi)發(fā)、測(cè)試、正式)變量配置。

關(guān)于react-native我認(rèn)為最好的環(huán)境配置詳情可參考taro的taro react-native更詳細(xì)更全面。

總結(jié)

以上是生活随笔為你收集整理的native react 常用指令_React Native入门基础篇(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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