?$原創不易，還希望各位大佬支持一下$

🔥 $Flutter和reactNative的區別$

🔥 $reactNative的環境安裝$

🔥 $Node、JDK、AndroidStudio$

前言

利用一點時間去關注了最近比較火爆的兩款APP開發語言，分別是Flutte rn（React Native）除此之外小編還總結過一篇關于開發app各語言之間的差距如果感興趣可以看一下 點擊訪問 里面涵蓋 原生app、uni-app、react Native、Flutte、wap2app、Sass app等技術的利弊分析

Flutte 還是 react Native？

至于大家如何去選擇呢，網絡上很多對兩者的對比，也比較全面了，下面就是一作者在文章中總結的對比圖表

嘻嘻 看到里面的第一項對比我就有了答案，react Native 是基于javaScript，作為前端的我當然會一如反顧的選擇他，而且更有分量的是rn基于強大的父親react，在這里大家可以自己去根據自己的愛好、更多方面的對比之后選擇自己適合的一款語言。

單從環境方面，無論是 React Native 還是 Flutter ，都需要 Android 和 IOS 的開發環境，也就是 JDK 、Android SDK、Xcode 等環境配置，而不同點在于 ：
React Native 需要 npm 、node 、react-native-cli 等配置 。
Flutter 需要 flutter sdk 和 Android Studio / VSCode 上的 Dart 與 Flutter 插件。
從配置環境上看， Flutter 的環境搭配相對簡單，而 React Native 的環境配置相對復雜，而且由于 node_module 的“黑洞”屬性和依賴復雜度等原因，目前在個人接觸的例子中，首次配置運行成功率 Flutter 是高于 React Native 的，且 Flutter 失敗的原因則大多歸咎于網絡。

還有更多方面的對比 如：實現原理、編程開發、插件開發、編譯和產物、性能、發展未來等幾大方面去分析兩者的區別，大家可以參考這篇文章 點擊訪問

小編已經是被react Native吸引了，所以下面呢小編僅僅為大家帶來的就是rn的環境安裝配置，當時自己看的時候真的是頭疼呢，所以總結下來給大家分享！

React Native開發環境搭建

小編參考的是官網的這篇搭建開發環境

依賴安裝

這里可以看到必須安裝的以來有 Node、JDK 和 Android Studio。

Node

這個對于前端人來說并不陌生，小編之前專門編寫過一篇Node環境配置的文章大家可以根據文章步驟走就沒有問題 點擊進入

JDK

關于JDK呢 看到官方大大也已經是提供了鏈接我們可以去官網下載，但是會出現這個問題


點擊下載還得需要Orcle的賬號登陸才可以，但是不要慌福利安排上，大家訪問這個地址就可以了 點擊進入在這里我們可以直接下載的
下載下來后 我放到了自己喜歡的目錄下

然后下面就是JDK環境變量的配置了（為了大家能夠看懂我直接圖解）需要我們配置的有一下幾項

變量名：JAVA_HOME
變量值：C:\Program Files (x86)\Java\jdk1.8.0_91 // 要根據自己的實際路徑配置
變量名：CLASSPATH
變量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //記得前面有個"."
變量名：Path（這是在Path中編輯去新增的）
變量值：%JAVA_HOME%\bin;
變量值：%JAVA_HOME%\jre\bin;

需要填寫的就是下面這兩項（共新增兩個）

變量名：JAVA_HOME
變量值：C:\Program Files (x86)\Java\jdk1.8.0_91 // 要根據自己的實際路徑配置
變量名：CLASSPATH
變量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //記得前面有個"."

配置成功后我們就有了

后面我們在Path中新增

變量值：%JAVA_HOME%\bin;
變量值：%JAVA_HOME%\jre\bin;

添加成功后我們確認 然后測試一下JDK是否安裝成功

打開cmd輸入 java -version

成功

Android Studio

我們訪問這個地址直接下載就好 點擊進入
下載好我們直接安裝

文檔上要我們確保選中這幾項然后安裝這些組件，但是我并沒有發現這幾項 然后是后面自己安裝的，自己安裝是這樣的

搜索Android SDK


按照上面的尋找到對應的插件安裝就好了

配置 ANDROID_HOME 環境變量

跟上面的JDK環境變量是一樣的
3. 配置 ANDROID_HOME 環境變量#
React Native 需要通過環境變量來了解你的 Android SDK 裝在什么路徑，從而正常進行編譯。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建，創建一個名為ANDROID_HOME的環境變量（系統或用戶變量均可），指向你的 Android SDK 所在的目錄（具體的路徑可能和下圖不一致，請自行確認）：

ANDROID_HOME Environment Variable

SDK 默認是安裝在下面的目錄：

C:\Users\你的用戶名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑，具體是Appearance & Behavior → System Settings → Android SDK。

你需要關閉現有的命令符提示窗口然后重新打開，這樣新的環境變量才能生效。

把一些工具目錄添加到環境變量 Path#
打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量，選中Path變量，然后點擊編輯。點擊新建然后把這些工具目錄路徑添加進去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

配置完成之后我們就可以創建新的項目了

react Native啟航

在這里我使用的時真機調試

啟動項目

yarn react-native run-android

啟動后他會彈起來一個終端（不要關閉）

然后手機上也就跑起來我們的項目了

?$原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$

總結

以上是生活随笔為你收集整理的react Native 环境安装配置——图解版一目了然的全部內容，希望文章能夠幫你解決所遇到的問題。

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