React Native學習筆記（二）—— 概要、開發環境搭建、第一個React Navite程序

一、概要

1.1、跨平臺開發技術

在移動端開發項目中。開發資源不夠時，同時由兩個團隊維護安卓和IOS兩套原生APP是成本很高的。此時，就需要選擇一個同時支持多平臺的客戶端開發框架，能夠使用一套代碼，編譯出多平臺的APP。

這樣一方面能夠縮減開發人數，節省開發成本。另一方面由於代碼統一，避免了不同平臺版本分支，導致的用戶體驗差異。

本文簡單考察了當前比較主流的客戶端跨平臺開發框架，我們來一起看看當前的主流框架有哪些。

1.1.1、Flutter

官網地址： https://flutter.dev/ 項目地址： https://github.com/flutter/flutter

Flutter是由谷歌推出的多平臺開發框架，項目主頁對其自己的定義如下：

We think Flutter will help you create beautiful, fast apps, with a productive, extensible and open development model, whether you're targeting iOS or Android, web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of your choice.

它於2015年4月的Flutter開發者會議上被公佈，Flutter是使用Dart語言編寫，並利用該語言的許多高級功能。在Windows、macOS和Linux上，Flutter在Dart虛擬機中運行，該虛擬機具有即時編譯執行引擎。在編寫和調試應用時，Flutter使用即時編譯功能進行“熱重載”(Hot Reload)，可以將對源文件的修改注入正在運行的應用中。Flutter通過支持有狀態的熱重載來擴展此功能，在大多數情況下，對源代碼的更改可以立即在運行的應用中反映出來，而無需重新啓動或丟失任何狀態。Flutter實現的此功能已廣受讚譽。 （引用：https://zh.wikipedia.org/wiki/Flutter）

1.1.2、React Native

官網地址： https://reactnative.dev/ 項目地址： https://github.com/facebook/react-native

React Native看姓就知道是誰推出的了，不多說了。官方給的 slogen 是 Learn once, write anywhere. 項目主頁對其自己的介紹爲：

Create native apps for Android, iOS, and more using React React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.

也有一些框架支持代碼編譯爲 React Native, 來提供客戶端開發支持，如京東的小程序開發框架 taro ，以及 Vue Native （停止維護）

1.1.3、Weex

阿里公開Weex技術架構，還開源了一大波組件。Weex是一個構建移動端跨平臺UI框架。Weex使開發人員能夠使用類似Web的語法通過單一代碼庫構建iOS、Android和Web應用。 Vue.js和Rax（提供類React語法前端框架）這兩個前端框架被廣泛應用於Weex頁面開發，同時Weex也對這兩個前端框架提供了最完善的支持。 

1.1.4、Xamarin

微軟收購了 xamarin 後，也在繼續發展基於C#的移動端跨平臺開發，不過相較於 React Native 和 Flutter 屬於不溫不火的狀態。xamarin 在這麼多年以後，終於迎來了全新替代者，它就是MAUI。微軟提供了 Xamarin.Forms 的遷移文檔： https://learn.microsoft.com/en-us/dotnet/maui/get-started/migrate?view=net-maui-7.0

MAUI的一句話介紹 ：

.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.

其架構如下：

MAUI架構圖

安卓APP 編譯產物爲IL，在APP啓動時JIT運行爲本機代碼。iOS App 則完全由C# AOT編譯爲IOS的本地組件代碼。

更多可查看：https://learn.microsoft.com/en-us/dotnet/maui/what-is-maui?view=net-maui-7.0

延伸對比：

1. Xamarin需要爲每個平臺提供一個項目，MAUI不需要

2. MAUI支持.NET 6， xamarin支持.net core 3.1。

3. Xamarin無法直接調用繪圖API，MAUI提供了跨平臺的繪圖接口。

4. Slim Renderers, MAUI提供了 Slim Renderer Xamarin使用Custom Renderers

5. MVU（Model-View-Update）開發模式支持。Xamarin支持 ReactiveUI 以及 MVVM，MAUI支持Blazor以及MVU

6. 庫統一化管理。MAUI合併了Xamarin.Essentials，對必備庫進行了統一化處理。提供了通訊錄，照片，設備傳感器等接口。

7. 熱重載。 MAUI支持熱重載。

引用自：https://innowise-group.com/blog/net-maui-vs-xamarin/

1.1.5、UNI-APP / Taro

uni-app 和 taro 都是主打跨平臺的小程序開發框架，只不過是一個用Vue開發，一個使用 React。 uni-app 由 dcloud 開發，大概是國內推出小程序概念的最早公司了，甚至早於微信小程序。官方提供的框架，支持直接編譯爲安卓和ios應用。 taro 由京東開發，上面提過，是編譯爲 React Native 來提供移動APP支持。

官方地址: uni-app https://uniapp.dcloud.net.cn/ taro https://taro.jd.com/

1.1.6、蘋果 H5 熱更新問題

之前蘋果提出過應用市場的APP，不允許H5套殼，管控版本熱更新。筆者移動端開發參與較少，一度以爲 React Native， UNI-APP 之類的方案已經不能使用。不過今天再看並非如此，從UNI-APP社區討論來看，正常使用 React Native / UNI-APP / Taro 應該不會遇到太大合規問題。

進一步瀏覽蘋果的 H5 熱更新問題： https://zhuanlan.zhihu.com/p/138243490 https://ask.dcloud.net.cn/question/84952 https://ask.dcloud.net.cn/article/36654

1.1.7、總結

移動端跨平臺框架之爭，其實主要是 谷歌/臉書/微軟 三家爭霸。 UNI-APP一枝獨秀。

在技術選型上，如果有前端開發人員參與，且熟悉 React / Vue, 那麼可以使用 Taro ，React Native （React技術棧） / UNI-APP （VUE技術棧） 。

如果前端資源不足，則可以考慮使用 MAUI / Flutter。 MAUI是C#開發，適合相應的微軟技術棧的團隊。 Flutter需要學習一門新的 Dart 語言，不過語言特性淺顯易懂，學習難度也不大。

1.2、ReactNative簡介

作爲目前流行的跨平臺技術框架之一，React Native是Facebook技術團隊於2015年4月在早先的React前端框架基礎上開源的一套移動跨平臺開發框架，可以同時支持iOS和Android兩大移動平臺。

React Native 中文網 https://www.reactnative.cn/

源代碼 https://github.com/facebook/react-native

官網 https://reactnative.dev/

React Native使用流行的JSX語法來替代常規的JavaScript語法，提高了代碼的可閱讀性。JSX是一種XML和JavaScript結合的擴展語法。

React Native框架的優勢在於，只需要使用一套代碼就可以覆蓋多個移動平臺，真正做到“Learn Once，Write Anywhere”。React Native框架底層使用的是JavaScriptCore引擎，基本上只需要更新一下JavaScript文件，即可完成整個App的更新操作，非常適合用來開發App的熱更新功能。除此之外，React Native框架提供的開發和調試環境也是非常友好的，開發者只需要像刷新瀏覽器一樣，就可以即時查看到代碼修改後的效果，並且還可以在Chrome瀏覽器中查看控制檯輸出、加斷點、單步調試等。

1.2.1、React Native工作原理：

 React Native也是用的JSX語法。

1.3、React Native的優缺點

優點：

• 容易上手：RN 入門較輕鬆，只要有一門面向對象語言的基礎，都可以很快上手，而且社區較活躍，很多資料在網上都能查到。

• 跨平臺開發：相比原生的ios 和 android app各自維護一套業務邏輯大同小異的代碼，React Native 只需要同一套javascript 代碼就可以運行於ios 和 android 兩個平臺，在開發、測試和維護的成本上要低很多。
• 快速編譯：相比原生的ios 和 android app各自維護一套業務邏輯大同小異的代碼，React Native 只需要同一套javascript 代碼就可以運行於ios 和 android 兩個平臺，在開發、測試和維護的成本上要低很多。
•  快速發佈：RN 可以通過 JSBundle 即時更新 App。相比原來冗長的審覈和上傳過程，發佈和測試新功能的效率大幅提高。

缺點：

• 動畫性能： RN 在動畫效率和性能的支持還存在一些問題，性能上不如原生。這時候只能嵌入原生的組件，但工作量可能會比較大。
• 學習成本較高： 在某些地方開發者依然需要爲 iOS 和 Android 平臺提供兩套不同的代碼，比如在原有項目的基礎上嵌入RN時，需要根據平臺進行封裝和配置。
• 配置比較麻煩：首先要安裝 Node、Watchman、Yarn、Xcode(iOS)、CocoaPods(iOS)、Android Studio(Android)、JDK(Android) 等依賴。如果只開發單個平臺，那就安裝相應平臺的依賴就行了。因爲很多庫都是在國外，所以還要切換鏡像，或者給終端FQ才能下載，不然就會很慢，或者乾脆就卡住了。

二、搭建開發環境

2.0、基礎平臺

2.0.1、Node.js安裝

If you have already installed Node on your system, make sure it is Node 14 or newer. If you already have a JDK on your system, we recommend JDK11. You may encounter problems using higher JDK versions.

Node.js要求14版或更新

https://nodejs.org/en

查看版本

2.0.2、yarn安裝

Yarn是Facebook發佈的一款依賴包安裝工具。Yarn是一個新的快速安全可信賴的可以替代NPM的依賴管理工具。

https://yarnpkg.com/

 

 https://yarn.bootcss.com/

 

 

2.0.3、react-native-cli安裝

安裝：

 查看版本：

 創建項目

2.0.4、Chocolatey

前言

在 Linux 下，大家喜歡用 apt-get 來安裝應用程序，如今在 windows 下，大家可以使用 Chocolatey 來快速下載搭建一個開發環境。

Chocolatey 的哲學就是完全用命令行來安裝應用程序， 它更像一個包管理工具（背後使用 Nuget ）

另外需要說明的是， Chocolatey 只是把官方下載路徑封裝到了 Chocolatey 中，所以下載源都是其官方路徑，所以下載的一定是合法的，但是如果原軟件是需要 Licence 註冊的話，那麼 Chocolatey 下載安裝好的軟件還是需要你去購買註冊。不過 Chocolatey 一般還是會選用免費 Licence 可用的軟件。

Chocolatey官網：https://chocolatey.org/

chocolatey是一個包管理工具，類似Node、docker、yarn等。而 chocolatey又可以很方便地安裝其他工具軟件。 chocolatey更像是一個將一切操作都集中在命令行中的工具。它可以將機器上安裝的全部程序進行管理起來。

安裝

https://chocolatey.org/install#individual

打開powershell:

 

 

 輸入官方要求安裝的指令：

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

 

 

 安裝完成後就可以測試了：

 

 

命令

查找包
可用 search/find/list 指令查找包，支持模糊查詢。如果想看有哪些包，可以直接去官網看：https://chocolatey.org/packages

注意，現在的官網文檔不再列出find指令，之後可能會被廢棄。具體指令爲：

choco search <filter> [<options/switches>]
choco list <filter> [<options/switches>]
clist <filter> [<options/switches>]
列出本地的包 clist -l, -l爲--lo, --localonly, --lolcal-only的簡寫
列出本地的包與電腦安裝過的軟件 choco list -li 或 choco list -l -i
-i需要配合-l使用，用於列出不歸Chocolatey管理的程序

clist 是 `choco -list` 的簡寫。

clist -l
clist potplayer
outdated 列出可升級的包
在大於0.9.9.6的版本中，可通過指令choco outdated列出待升級的包

upgrade 升級
update 指令已/即將被棄用，現在升級只用upgrade

choco upgrade all -y

choco upgrade 指令可簡寫爲 cup，如cup all -y

pin 固定
用於固定軟件，使得在執行升級全部包時自動跳過；通過維護一張固定列表實現該效果

用法：

添加至固定列表：choco pin add -n=git，其中-n是-name的簡寫
從固定列表移除：choco pin remove -n=git
列出固定列表：choco pin list
install 安裝
文檔：https://chocolatey.org/docs/commands-install
choco install 可簡寫爲 cinst，語法爲：

choco install <pkg|packages.config> [<pkg2> <pkgN>] [<options/switches>]
cinst <pkg|packages.config> [<pkg2> <pkgN>] [<options/switches>]
添加參數以跳過包校驗：--ignore-checksums
可一次性下載多個包，如：choco install a b c ... -y
如用代理安裝vscode並自動確認：

choco install vscode -y --proxy=127.0.0.1:10809
uninstall 卸載
choco uninstall，可簡寫爲 choco cuinst

安裝軟件

choco install ruby
cinst ruby

安裝ruby

choco install ruby

安裝 Python

choco install python

安裝 Java JDK7 或 JDK8

choco install jdk7
choco install jdk8 

搜索軟件

clist ssh
choco list ssh

卸載軟件

clist ssh
cuninst ssh

其它

我的chocolatey安裝目錄爲：

C:\Users\chzhao\AppData\Local\Temp\chocolatey\chocInstall\tools\chocolateyInstall

其它命令還包括：

cpack
cpush
cup
cver

## Need Update Software List
choco outdated

## Update Software
choco upgrade all
choco upgrade chocolatey

No Update Some Software When Upgrade:
choco pin notepad2-mod

## List Installed Software
choco list --local-only

List Installed Software (Include Non-Chocolatey-Install) 
choco list -li
choco list -lai

## Uninstall Software
choco uninstall sourcetree

## Search Software
choco search docker-desktop
choco search > 1.txt

## View Software Information
choco info desktop-desktop

## Temp Path
%temp%\chocolatey

choco install chocolateygui 還可以安裝圖形化工具

2.1、安裝JDK

2.1.1、安裝依賴項JDK

您將需要 Node、React Native 命令行界面、JDK 和 Android Studio。

雖然您可以使用您選擇的任何編輯器來開發您的應用程序，但您需要安裝 Android Studio 才能設置必要的工具來構建適用於 Android 的 React Native 應用程序。

如果您已經在系統上安裝了 Node，請確保它是 Node 14 或更高版本。如果您的系統上已有 JDK，我們建議使用 JDK11。使用較高的 JDK 版本時可能會遇到問題。

2.1.2、JDK下載

官方網址https://www.oracle.com/java

進入後 點擊Download Java

 點擊後有三個LTS版本（Java17、Java11、Java8）和一個最新版（Java18）

  以Java8爲例進行下載

下載時會彈出此窗口，就是讓你登錄的，沒有賬號可以註冊一個，然後下載就行

2.1.3、安裝JDK11和JDK17

 

 

 

 

2.1.4、JDK1.8配置環境變量

 （鼠標右鍵）此電腦 （選擇）屬性 （找到）高級系統設置 （選擇）高級 （找到）環境變量

 

 

 接下來開始配置環境變量（兩次新建一次編輯）

先點擊新建，變量名：JAVA_HOME 

變量值：（是你JDK的安裝路徑） 

填完之後點擊確定

再次點擊新建

變量名：CLASSPATH   

變量值：（.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;）

 

  然後找到Path 點擊編輯

 添加一個(.)

再添加(%JAVA_HOME%\bin)

之後就是一直確定就行，到這裏環境變量配置算是完成了，接下來查看一下

Windows鍵+R鍵 打開cmd命令控制檯

 輸入 java -version 回車 查看jdk信息

參考JDK的切換：(5條消息) 同時安裝多個版本的JDK（JDK1.8和JDK17）並配置環境變量_沫洺的博客-CSDN博客

注意：如果切換不成功的情況

 3.4、JDK17安裝

 

 

 

 

2.1.5、JDK17環境變量配置

還是先找到環境變量配置

 因爲JDK1.8我們已經配置過CLASSPATH和PATH，所以只需要改一下JAVA_HOME就行

這裏又是 （兩次新建一次編輯）

點擊新建，變量名：JDK1.8

變量值：（JDK1.8的安裝路徑）

點擊新建，變量名：JDK17

變量值：（JDK17的安裝路徑）

找到JAVA_HOME，點擊編輯

變量值改爲（%JDK1.8%）

 操作完之後的效果如下

 最後還是對剛纔的JAVA_HOME裏的變量值改爲（%JDK17%）就行

 

此時再查看jdk信息

 就切換爲jdk17了

2.1.6、最後總結

今後用哪個版本的JDK就只需要改變JAVA_HOME下的JDK版本號就行

比如1.8改爲17

 注意：如果切換不成功的情況

2.2、安卓開發環境

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

2.2.1、 安裝Android Studio

下載並安裝 Android Studio。在 Android Studio 安裝嚮導中，請確保選中以下所有項目旁邊的框：

• Android SDK
• Android SDK Platform
• Android Virtual Device
• 如果您尚未使用 Hyper-V：（請參閱此處瞭解 AMD 或 Hyper-VPerformance (Intel ® HAXM))

然後，單擊“下一步”以安裝所有這些組件。

2.2.2、Android Studio 下載

(1)、國內站點下載

https://www.pcsoft.com.cn/soft/36783.html Android Studio2022.1.1.19 官方版

(2)、官網下載

Android Studio下載地址-谷歌中國，最新版本目前是Dolphin | 2021.3.1 Patch 1，這個版本新增了很多牛逼的功能，但是手上有工作項目的不要去輕易嘗試，說不定你就編譯失敗了，失敗了也不要擔心，解決就可以了。

點擊 Download Android Studio 進行下載，會出現一個彈窗告訴這個版本的一些信息。

 不用管他，直接滑動到最後。

2.2.3、Android Studio安裝

雙擊運行

點擊 Next 下一步

點擊 Next 下一步

 默認會給你裝到C盤，這裏我修改到了G盤(PS: 這裏一定要改路徑，否則隨着你開發過程中，你的C盤空間會越來越小，這裏我放的是G盤，只要不裝在系統盤裏，其他盤隨意，不過也要有一定空間纔行。),點擊 Next 下一步

 點擊 Next 下一步(PS：這裏沒有其他騷操作，不要亂來)

 等安裝完成

 點擊 Next 下一步,

 點擊Finish進行第一次運行了,如果你不是第一安裝了，那麼就是覆蓋安裝，也是一步到位，沒啥好講的。現在我們運行一下：

 如果你選擇上面那個就會在你電腦安裝默認的配置，這裏不導入配置，直接OK即可,然後你就會看到AS的啓動圖片：

 

 不得不說比之前的要好看一些，然後會彈出。

就是讓發送使用的信息給谷歌，發個錘子，決絕，點擊“Don’t send”,

 這個地方是說你沒有SDK，讓你設置代碼，這裏不設置，點擊 Cancel

 等待一會兒

 這個圖片是告訴你，Android能做的事情有手機，穿戴設備，TV，還有智能設備等，點擊 Next 下一步

 Android Studio 默認會把你的SDK下載放在C盤，到時候你的C盤就炸了，谷歌太壞了，很多新手都會直接下一步

 我們選擇Custom 自定義，然後點擊 Next 下一步

 白色的看久了，我覺得眼睛不舒服，所以我都是默認黑色的，看個人喜好,然後點擊 Next 下一步，之前我們選擇自定義SDK的路徑

 所以這個地方就是讓你該路徑的，改好之後就點擊 Next 下一步

 然後就會下載對應當前版本的SDK配置文件，點擊Finish就會開始下載(PS: 請在網絡良好是嘗試)

 很明顯，我的這個網速就不這麼樣，這個時候你就可以泡一杯咖啡，說到咖啡你有沒有想到Java的圖標呢？

好了，點擊finish

1.啓動一個新的Android Studio項目
2.打開一個現有的Android Studio項目
這裏只說前面一兩條，既然是做教程，那我們創建一個新的項目(PS:創建一個新的和打開一個已有的項目有什麼區別呢，創建一個新的就只有這樣項目最基本的已經插件和依賴，以這個新的爲準，而打開已有的就會以老項目的環境爲準，這就是爲什麼你從網上下載別人的代碼再打開之後要配置很久的原因，因爲你的環境和別人不一定就一樣，其次就是裏面用到的SDK、API版本、依賴框架等一些內容不一樣，所以用的時間很久，猶豫是在網絡慢的時候更突出，相當煎熬，我咖啡都喝了兩杯了，還沒有下載完配置，心碎，辣雞軟件，毀我青春)。

這裏默認是創建的一個空的Activity(活動),點擊Next。下一步

 

 點擊finish 就會開始創建這個項目並下載一些配置文件

 安裝虛擬機

 

 選擇你需要的模擬器版本，看你需要來安裝吧。

 

2.1.4、Android SDK的環境變量配置

Android SDK的環境變量配置

 1、右鍵選中我的電腦，點擊擊屬性，進入系統界面，如圖：

 2、點擊高級系統設置，如圖：

 3、點擊環境變量，如圖：

 

 

找到自己的SDK安裝的路徑

 4、點擊系統變量下的新建按鈕，輸入ANDROID_HOME，並輸入SDK的根目錄E:\Android\SDK，如圖：

 

 

 5、點擊確定，然後點擊系統變量下的path變量，添加這兩條內容E:\Android\SDK\emulator，E:\Android\SDK\tools，E:\Android\SDK\tools\bin，E:\Android\SDK\platform-tools，如圖：

 

 

 6，點擊確定，一直確定回到桌面，打開cmd終端，輸入adb version和emulator -version，確認配置生效，如圖：

 

 

 至此，Android SDK的環境變量已經配置完成！

接下來，選擇“SDK工具”選項卡，並在此處選中“顯示包詳細信息”旁邊的框。查找並展開該條目，然後確保已選中該條目。Android SDK Build-Tools33.0.0最後，點擊“應用”，下載並安裝安卓SDK及相關構建工具。

 

 

創建新應用程序

如果您之前安裝了全局軟件包，請將其刪除，因爲它可能會導致意外問題：react-native-cli

npm uninstall -g react-native-cli @react-native-community/cli

React Native 有一個內置的命令行界面，你可以用它來生成一個新項目。您可以使用 Node.js 附帶的 訪問它，而無需全局安裝任何內容。讓我們創建一個名爲“AwesomeProject”的新 React Native 項目：npx

npx react-native@latest init AwesomeProject

如果要將 React Native 集成到現有應用程序中，或者從 Expo 中“彈出”，或者要向現有的 React Native 項目添加 Android 支持，則不需要這樣做（請參閱與現有應用程序的集成）。您還可以使用第三方 CLI 來初始化您的 React Native 應用程序，例如 Ignite CLI。

[可選]使用特定版本或模板

如果你想用特定的 React Native 版本啓動一個新項目，你可以使用以下參數：--version

npx [email protected] init AwesomeProject --version X.XX.X

運行你的 React Native 應用程序

第 1 步：啓動地鐵

npx react-native start

第 2 步：啓動應用程序

npx react-native run-android

如果一切設置正確，您應該很快就會看到您的新應用程序在Android模擬器中運行。

備註：JDK切換參考網站：(5條消息) 同時安裝多個版本的JDK（JDK1.8和JDK17）並配置環境變量_沫洺的博客-CSDN博客

備註：安裝AndroidStudio可以參考這個網站：(5條消息) Android Studio 安裝配置教程 - Windows(詳細版)_初學者-Study的博客-CSDN博客

備註：Android SDK的環境變量配置參考網站：(5條消息) Android SDK的環境變量配置_完成android sdk 環境變量配置、測試基本過程_w1990end的博客-CSDN博客