當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React-native 环境配置过程与搭建项目问题汇总

發(fā)布時間：2025/3/21 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 React-native 环境配置过程与搭建项目问题汇总小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?首先，最好參照來源當然是來自于開源代碼本身的文檔：

https://reactnative.cn/docs/getting-started/

一、初始環(huán)境搭建

1.環(huán)境組件

由于從網(wǎng)上查找React-native的搭建版本是0.48，我就還通過win10的powerShell安裝了? -Chocolatey

Chocolatey是一個 Windows 上的包管理器，類似于 linux 上的yum和?apt-get。你可以在其官方網(wǎng)站上查看具體的使用說明。一般的安裝步驟應(yīng)該是下面這樣：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

就是直接上述這串文本復制到powerShell中運行即可。

這個工具可以幫助我們?nèi)ハ螺dReact-native 環(huán)境配置的一些必要的組件

Python 2 （必要組件1）

打開命令提示符窗口，使用 Chocolatey 來安裝 Python 2.

注意目前不支持 Python 3 版本。

choco install python2

Node（必要組件2）

打開命令提示符窗口，使用 Chocolatey 來安裝 NodeJS。

choco install nodejs.install

但是0.56的版本文檔中。這個chocolatey已經(jīng)不是一定要使用的了。只需要個人自行去下載指定版本以上的組件即可

我們建議直接使用搜索引擎搜索下載 Node 、Python2 和Java SE Development Kit (JDK)注意 Node 的版本必須高于 8.3，Python 的版本必須為 2.x（不支持 3.x），而 JDK 的版本必須是 1.8（不支持 1.9）。

2.接著就是React-native的主要命令行工具

Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)（packager）等任務(wù)。

npm install -g yarn react-native-cli

安裝完 yarn 后同理也要設(shè)置鏡像源：

yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。

3.最后當然android必不可少的編譯環(huán)境Android?studio

這邊需要Android studio2.0以上。。至于怎么安裝就不在這里贅述了。

二、創(chuàng)建初始項目

react-native init AwesomeProject

以上就創(chuàng)建項目名為AwesomeProject的操作，同樣是在powerShell中執(zhí)行。

一大串的執(zhí)行命令之后，就會在執(zhí)行的目錄下創(chuàng)建了AwesomeProject文件夾：如下

這樣已經(jīng)生成了一個最簡單的RN項目，其中android文件下的，就和android?studio創(chuàng)建的項目是一致的

cd AwesomeProject react-native run-android

然后可以通過USB連接好手機，將項目跑起來。

三、項目運行問題（踩坑與填坑）

SDK location not found問題。?android項目指定的SDK路徑?jīng)]找到
、

解決辦法:　

此時說明我們android項目沒有找到指定SDK的配置，所以我們可以從原有的android?studio項目中，找到【local.properties】復制到RN項目android的根目錄下，

主要就是local.properties中配置了有SDK的路徑

sdk.dir=E\:\\XXX\\xxx\\sdk　

?這時候重新用react-native run-android?運行項目即可.

紅色界面-Unable to load script from assets?

原因：因為 android/app/src/main?文件目錄中缺少?assets.

解決辦法:

1，在 android/app/src/main 目錄下創(chuàng)建一個 assets空文件夾

mkdir android/app/src/main/assets

2，在項目根目錄運行

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

實際上操作就是處理根目錄的index.js，最后在assets目錄中生成兩個文件

index.android.bundle

index.android.bundle.meta

就我理解，應(yīng)該實現(xiàn)android設(shè)備與PC的js server進行溝通中介。以后有空再詳細看看。

powerShell執(zhí)行react-native bundle（上一條問題的命令）時，出現(xiàn)Unable to resolve module `AccessibilityInfo`

---解決辦法:

具體原因可能是?react-native: 0.56.0有漏洞導致的。

所以我們需要安裝一個穩(wěn)定版本

react-native應(yīng)該是0.55.4 比較穩(wěn)定，react-native-cli 聽一群里的大神說使用1.2.0更穩(wěn)定，所以我把這舊版的都先uninstall了。

那就干吧，分別執(zhí)行以下命令（注意噢，這樣全局執(zhí)行）：?

npm uninstall -g react-native-cli npm install react-native@0.55.4 npm install -g react-native-cli@1.2.0 react-native init --version="0.55.4" KAwesomeProject

就是利用0.55.4版本重新創(chuàng)建一個項目。

參照https://blog.csdn.net/aceaddi/article/details/81148585

紅色界面-could not connect to devolopment server - e.g. 10.0.1.1:8081

此時是有由于調(diào)試手機沒有和本地開發(fā)服務(wù)器連接在一起。從官網(wǎng)的文檔可知

(Android 5.0及以上)使用adb reverse命令

注意，這個選項只能在5.0以上版本(API 21+)的安卓設(shè)備上使用。

首先把你的設(shè)備通過USB數(shù)據(jù)線連接到電腦上，并開啟USB調(diào)試（關(guān)于如何開啟USB調(diào)試，參見上面的章節(jié)）。

運行adb reverse tcp:8081 tcp:8081

不需要更多配置，你就可以使用Reload JS和其它的開發(fā)選項了。

(Android 5.0以下)通過Wi-Fi連接你的本地開發(fā)服務(wù)器

首先確保你的電腦和手機設(shè)備在同一個Wi-Fi環(huán)境下。

在設(shè)備上運行你的React Native應(yīng)用。和打開其它App一樣操作。

你應(yīng)該會看到一個“紅屏”錯誤提示。這是正常的，下面的步驟會解決這個報錯。

搖晃設(shè)備，或者運行adb shell input keyevent 82，可以打開開發(fā)者菜單。

點擊進入Dev Settings。

點擊Debug server host for device。

輸入你電腦的IP地址和端口號（譬如10.0.1.1:8081）。在Mac上，你可以在系統(tǒng)設(shè)置/網(wǎng)絡(luò)里找查詢你的IP地址。在Windows上，打開命令提示符并輸入ipconfig來查詢你的IP地址。在Linux上你可以在終端中輸入ifconfig來查詢你的IP地址。

回到開發(fā)者菜單然后選擇Reload JS。

紅色界面-response error code 500

?四、項目成功運行。

轉(zhuǎn)載于:https://www.cnblogs.com/treekang/p/9567131.html

總結(jié)

以上是生活随笔為你收集整理的React-native 环境配置过程与搭建项目问题汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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