學習一次，隨處書寫。(以下文字來自各大網上資料整理而來，侵刪！)

概述

使用React為Android和iOS創建本機應用

React Native將本機開發的最佳部分與React(用于構建用戶界面的一流JavaScript庫)結合在一起。 少用或多用。您現在可以在現有的Android和iOS項目中使用React Native，也可以從頭開始創建一個全新的應用程序。

用JavaScript編寫-使用本機代碼呈現

React原語渲染到本機平臺UI，這意味著您的應用程序使用與其他應用程序相同的本機平臺API。 許多平臺，一個React。創建特定于平臺的組件版本，以便單個代碼庫可以跨平臺共享代碼。使用React Native，一個團隊可以維護兩個平臺并共享一種通用技術-React。

面向所有人的原生開發

React Native可讓您創建真正的本機應用程序，而不會影響用戶的體驗。它提供了一套核心的像與平臺無關本地組件的View，Text和Image直接映射到該平臺的原生UI積木。

無縫跨平臺

React組件包裝了現有的本機代碼，并通過React的聲明性UI范例和JavaScript與本機API進行交互。這樣就可以為全新的開發人員團隊進行本機應用程序開發，并且可以讓現有的本機團隊更快地工作。

快速刷新

保存后立即查看更改。借助JavaScript的強大功能，React Native可讓您以閃電般的速度進行迭代。無需等待本地構建完成。保存，查看，重復。

會談

React Native團隊的成員經常在各種會議上發表演講。您可以在Twitter上關注React Native團隊的最新消息

Facebook支持，社區驅動

Facebook在2015年發布了React Native，并一直保持至今。 在2018年，React Native 在GitHub中任何存儲庫的貢獻者數量中排名第二。今天，React Native得到了來自世界各地的個人和公司的支持，包括Callstack，Expo，Infinite Red，Microsoft和Software Mansion。 我們的社區一直在運送令人興奮的新項目，并通過諸如React Native Windows和React Native Web之類的倉庫來探索Android和iOS以外的平臺。

誰在使用React Native？

從成熟的《財富》 500強公司到熱門的新興創業公司，成千上萬的應用程序都在使用React Native。如果您好奇使用React Native可以完成什么，請查看這些React Native官方展示柜！

與Flutter優缺對比

優勢熱重裝=快速編碼。

本質上與Flutter具有相同的功能。 熱重載允許開發人員將新代碼直接注入正在運行的應用程序中，從而加快了開發過程。因此，開發人員可以立即看到更改，而無需重建應用程序。 熱重載還保留了應用程序的狀態，避免了在完全重載期間丟失它的風險(在基于狀態的框架中這是一項關鍵優勢)，從而進一步加快了應用程序的開發速度。

一個代碼庫，兩個移動平臺(以及更多！)。

與Flutter完全相同：編寫單個代碼庫為2個應用程序提供動力-涵蓋Android和iOS平臺。 更妙的是，JavaScript通過與Web應用程序共享代碼，在編寫跨平臺應用程序時為您提供了幫助。這是通過創建可編譯為目標平臺的抽象組件來完成的。

它使用一種流行的語言-JavaScript。

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

開發者的選擇自由

React Native使開發人員可以構建跨平臺應用程序；不多不少 優點是React Native 允許開發人員精確地決定他們要使用什么解決方案。兩者都根據項目的要求以及開發人員的喜好而定。 假設，如果開發人員需要決定如何處理全局狀態(如何存儲和管理應用程序中許多組件中使用的數據)，選擇路由器庫或在JavaScript和TypeScript之間進行選擇–他們可以決定是否d傾向于使用自定義的UI庫，或者自己編寫。

相對成熟度。

官方的React Native版本是4年前發布的，因此Facebook團隊有足夠的時間來穩定API，并專注于解決問題和解決問題。現在，他們正在努力進行一些令人興奮的改進-例如減小應用程序的大小。

活躍而廣闊的社區。

React Native有龐大的開發者社區。不僅如此，還有無數的教程，庫和UI框架使學習該技術變得容易，并且可以快速，輕松地進行開發。

對React開發人員易于學習

我們列表中的這一優勢非常針對React開發人員。如果您具有Web開發的背景并且已經使用了流行的React解決方案，則可以輕松地使用React Native，而無需學習新的庫。您可以使用相同的庫，工具和模式。

最多減少50％的測試。

我們可以減少大約50％的自動化測試，因為我們可以創建相同的測試以在兩個平臺上運行，從而減少了對質量檢查團隊的需求。它看起來與Flutter應用程序開發中的相同-我們在此處進行了描述。

缺點它不是真正的本地人。

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

開箱即用的零件少。

React Native僅支持開箱即用的基本組件(其中許多組件適用于開箱即用的平臺，例如按鈕，加載指示器或滑塊)。 就像我們在本段中所說的那樣，外部存儲庫中有許多其他的React Native組件。開發人員可以在項目中使用它們，但這需要額外的精力和時間。 另一方面，Flutter旨在支持開箱即用的Material Design，因此該框架支持更多的小部件。節省時間。使用Flutter的開發人員可以使用易于定制且跨平臺一致的預制窗口小部件來創建大多數視圖。

開發者的選擇自由。

開發人員創建新項目后，他們需要確定要使用哪個導航包以及哪個全局狀態管理。了解每個解決方案的細微差別，最終決定要用于項目的最佳解決方案，可能需要花費大量時間。

很多廢棄的包裹。

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

脆弱的用戶界面。

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

應用比本地應用更大。

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

RN環境配置

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

然后運行以下命令來創建一個名為“ AwesomeProject”的新React Native項目，如果卡住了,則可能墻的原因或者網速問題：

expo init AwesomeProject # 創建項目

cd AwesomeProject

npm start || expo start # 運行項目運行您的React Native應用程序 在iOS或Android手機上安裝Expo客戶端應用程序，然后連接到與計算機相同的無線網絡。在Android上，使用Expo應用程序從終端掃描QR碼以打開您的項目。在iOS上，按照屏幕上的說明獲取鏈接。

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

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

安裝React Native CLI。

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

Android開發環境

如果您不熟悉Android開發，則設置開發環境可能會有些乏味。如果您已經熟悉Android開發，則可能需要配置一些內容。無論哪種情況，請確保仔細遵循以下幾個步驟。

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

Android SDK Platform

Performance (Intel ? HAXM)(有關AMD，請參見此處)

Android Virtual Device

然后，單擊“下一步”以安裝所有這些組件。設置完成后，將顯示“歡迎”屏幕，請繼續執行下一步。

2.安裝Android SDK。Android Studio默認情況下會安裝最新的Android SDK。但是，使用本機代碼構建React Native應用程序Android 9 (Pie)特別需要SDK。

3.配置ANDROID_HOME環境變量。React Native工具需要設置一些環境變量，以便使用本機代碼構建應用程序。 4.將平臺工具添加到Path。在Windows控制面板中的“ 系統和安全性”下，打開“系統”窗格，然后單擊“ 更改設置...”。打開“ 高級”選項卡，然后單擊“ 環境變量...”。選擇路徑變量，然后單擊編輯。單擊“ 新建”，然后將“平臺工具”的路徑添加到列表中。

RN 基本命令行操作

# 執行cli命令最好在管理員模式下運行不然會引發其它錯誤，設置為admin權限后如果還報錯可重啟電腦再嘗試下

react-native init NameProject # 創建RN項目

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

react-native init NameProject --template typescript # 創建RN TS項目

expo init NameProject # 也可以用expo

react-native run-android # 開發環境下運行RN項目(android)

react-native run-android --variant=release # 測試應用的發布版本,設置簽名后，此選項才可用

reqact-native link xxx # 將第三方庫與原生進行關聯如果發生錯誤使用gradlew clean清理下

adb shell input keyevent 82 # 利用adb工具命令式打開控制臺選項

adb reverse tcp:8081 tcp:8081 # 命令提示符下，然后重新運行項目

adb kill-server # 關閉adb服務

adb root # 重新啟動root權限的adb服務

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

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

gradlew clean # 清理構建android文件

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

gradlew assembleDebug # 編譯并打Debug包

gradlew assembleRelease # 編譯并打Release的包

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

yarn cache clean # yarn清除包緩存

# 環境遇到的問題

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

# 解決思路：停止運行Daemon進程

gradle --stop # Gradle會殺死任何閑置了3個小時或更長時間的守護程序，因此您不必擔心手動清理它們。

gradle --status # 停止守護程序后，可查看下狀態創建typescript項目 的時候可能會報錯，具體詳情可點擊此處查看即可。

上面出現的程序名gradlew需要特別說明下，說起gradlew就要聊聊gradle.介紹簡單來說就是gradle會快速迭代版本，如果合作開發項目會導致成員自己下載gradle，導致版本不一，從而手忙腳亂，所以干脆包裝起來，統一。因為gradle處于快速迭代階段，經常發布新版本，如果我們的項目直接去引用，那么更改版本等會變得無比麻煩。而且每個項目又有可能用不一樣的gradle版本，這樣去手動配置每一個項目對應的gradle版本就會變得麻煩；所以需要包裝，引入gradle-wrapper，通過讀取配置文件中gradle的版本，為每個項目自動的下載和配置gradle，就是這么簡單。我們便不用關心如何去下載gradle,如何去配置進項目來。下面一張圖對gradle與RN的關系。

通過gradle wrapper命令就可以愉快的gradlew了。

RN項目基本所需庫react-navigation React Navigation 源于 React Native 社區對一個可擴展且易于使用的導航/路由系統解決方案的需求，它完全使用 JavaScript 編寫。

redux 全局狀態管理器，解決組件數據通信問題。

react-native-vector-icons icon圖標容器，該庫自帶字體圖標，也可自定義圖標文件。

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

react-native-community/async-storage 本地存儲默認是不會帶的，需要用該庫進行操作，該語法糖與web的localstorage并無差別。

react-devtools 對react-native界面的dom進行調試。

react-native-debugger 對react-native程序的桌面調試工具。

react-native-config 解決不同環境(開發、測試、正式)變量配置。

關于react-native我認為最好的環境配置詳情可參考taro的taro react-native更詳細更全面。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。