當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

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

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

?首先，最好參照來(lái)源當(dāng)然是來(lái)自于開(kāi)源代碼本身的文檔：

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

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

1.環(huán)境組件

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

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

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

就是直接上述這串文本復(fù)制到powerShell中運(yùn)行即可。

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

Python 2 （必要組件1）

打開(kāi)命令提示符窗口，使用 Chocolatey 來(lái)安裝 Python 2.

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

choco install python2

Node（必要組件2）

打開(kāi)命令提示符窗口，使用 Chocolatey 來(lái)安裝 NodeJS。

choco install nodejs.install

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

我們建議直接使用搜索引擎搜索下載 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)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(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 某第三方庫(kù)名代替npm install --save 某第三方庫(kù)名。

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

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

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

react-native init AwesomeProject

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

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

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

cd AwesomeProject react-native run-android

然后可以通過(guò)USB連接好手機(jī)，將項(xiàng)目跑起來(lái)。

三、項(xiàng)目運(yùn)行問(wèn)題（踩坑與填坑）

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

解決辦法:　

此時(shí)說(shuō)明我們android項(xiàng)目沒(méi)有找到指定SDK的配置，所以我們可以從原有的android?studio項(xiàng)目中，找到【local.properties】復(fù)制到RN項(xiàng)目android的根目錄下，

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

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

?這時(shí)候重新用react-native run-android?運(yùn)行項(xiàng)目即可.

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

原因：因?yàn)?android/app/src/main?文件目錄中缺少?assets.

解決辦法:

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

mkdir android/app/src/main/assets

2，在項(xiàng)目根目錄運(yùn)行

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/

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

index.android.bundle

index.android.bundle.meta

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

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

---解決辦法:

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

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

react-native應(yīng)該是0.55.4 比較穩(wěn)定，react-native-cli 聽(tīng)一群里的大神說(shuō)使用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)建一個(gè)項(xiàng)目。

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

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

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

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

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

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

運(yùn)行adb reverse tcp:8081 tcp:8081

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

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

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

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

你應(yīng)該會(huì)看到一個(gè)“紅屏”錯(cuò)誤提示。這是正常的，下面的步驟會(huì)解決這個(gè)報(bào)錯(cuò)。

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

點(diǎn)擊進(jìn)入Dev Settings。

點(diǎn)擊Debug server host for device。

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

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

紅色界面-response error code 500

?四、項(xiàng)目成功運(yùn)行。

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

總結(jié)

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

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