react-native init AwesomeProject 很慢

最新推荐文章于 2024-09-09 01:33:35 发布
原创 最新推荐文章于 2024-09-09 01:33:35 发布 · 979 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种快速创建React Native项目的技巧，通过预先下载AwesomeProject模板并利用淘宝镜像加速npm依赖安装，有效解决了项目创建过程中的长时间等待问题。

React Native 新创建一个项目时很慢很慢，可以这样：

先下载一个AwesomeProject源代码 (不包含依赖)，然后npm install 安装依赖

npm 使用taobao的依赖

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

--------

react-native init AwesomeProject // 很慢

cd AwesomeProject

react-native run-ios

--------

React native 安装困难
dengjiangszhan的博客
11-02 776
➜ 111 npx react-native init MyApp --template react-native-template-typescript ✔ Processing template ✖ Installing dependencies error Error: Command failed: yarn install error Couldn't find package "domexception@^2.0.1" required by "jsdom@^16.4.0" on the
hybrid app初体验，和react-native一起飞
yinzhida's blog
01-12 1857
第一次启动了react-native的示例，今天主要把其中遇到的坑与解决的办法分享给大家。如有疏漏、错误还望指正。首先还是要从hybrid app这个概念说起（如果对于这个过程不感兴趣的同学，可以直接往下翻，从开始配置react-native看起）。hybrid app就是混合应用。从我个人的理解，本以为就是在原生的app里面嵌入一些网页（webview）,直到最近去体会了一把ionic，以及rea
React Native init很慢的解决方式之一
chibang4236的博客
10-10 729
npm install -g react-native-cli #如果没安装这个命令 ssh -D 7000 ssh的账号@ssh的ip; #登录服务器,并建立一个本地的7000的端口 , 实际上它登录在本地建立了一个socks5代理端口 export http_proxy=socks5://...
react-native init AwesomeProject
Shallow Memory的专栏
05-04 1700
错误提示： warning There appears to be trouble with your network connection.Retrying... 解决办法： npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
解决react-native 创建工程、init过程太慢的问题
又丑又不读书
07-14 7810
找到node.js的安装目录，进入nodejs\node_modules\npm找到文件npmrc，打开后在该文件末尾加上 registry = https://registry.npm.taobao.org 然后保存退出即可。
关于React Native初次启动项目时出现的下载过慢问题及其他问题解决。
qq_63105690的博客
09-09 2012
我尝试使用npx react-native doctor来查看当前环境状态，显示有两个问题，一是没有Android Studio，二是没有Andriod SDK。于是这个问题暂时搁置了。react-android-0.75.2-debug.aar和hermes-android-0.75.2-debug.aar。后来，我查阅资料，显示迟迟未下载完成的两个文件，其实可以通过手动下载的方式，手动导入。所以上面说的npx react-native doctor检测出的问题是不用管的。
从零开始搭建React Native完整原生环境（保姆级）
热门推荐
蜡笔小开心❤的博客
08-16 1万+
欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。
Ubuntu React Native环境搭建
一点码客
09-13 1855
安装依赖项 您将需要Node，React Native命令行界面，JDK和Android Studio。 虽然您可以使用您选择的任何编辑器来开发您的应用，但您需要安装Android Studio才能设置必要的工具来构建适用于Android的React Native应用。 节点 按照Linux发行版的安装说明安装Node 8.3或更高版本。 React Native CLI Node附带...
React-native 初始化项目很慢
weixin_30813225的博客
03-20 333
我是在Mac环境下，利用facebook开源的react-native创建原生app项目缓慢的问题 一：确定自己的环境配置是否有问题 二：打开终端，输入命令行 brew install wget 点击enter 进行安装 三：输入以下命令行 npm config set registry=http://registry.npm.taobao.org/ 转载于:https://www.cn...
React Native 工程初始化过慢解决办法+运行时产生的问题解决方案
Android_Glimmer的博客
12-16 2627
npm config set registry=http://registry.npm.taobao.org/
解决react native初次运行gradle慢的方案
LINGK98的博客
11-09 2040
解决react native初次运行gradle慢的解决方案
React Native入门（二）之Hello World（AwesomeProject）项目介绍
苦逼的程序猿☺
07-13 2633
前言在上一篇博客中，我们介绍了RN环境的搭建，以及遇到的各种坑，历经千辛万苦，终于算是完成了！也生成了一个项目，下面呢，我们就来简单了解一下生成的这个项目及相关的问题项目目录我们使用react-native init AwesomeProject命令，生成了一个AwesomeProject的项目，这个项目呢就算是我们RN的第一个Hello World项目了！我们打开这个项目： 整个项目的目录就
ReactNative 0.64 创建项目失败的若干问题
减肥ing的博客
03-29 1132
前言：我遇到的虽然不是什么难的技术问题。但是看到网上也没有相关的一些踩坑日志。我就写一下。希望可以帮你们节省点时间。 问题一：如下：当我们执行npx react-native init AwesomeProject创建工程时，提示cocoaPods 依赖安装失败； ✖Installing CocoaPods dependencies(this may take a few minutes) ✖Installing CocoaPods dependencies(this may take a ...
init RN项目过慢问题
JankoY的博客
10-07 240
切换npm源： npm config set registry https://registry.npm.taobao.org 切换yarn源： yarn config set registry https://registry.npm.taobao.org 安装或更新create-react-app版本： npm i -g create-react-app 查看create-react-app版本 create-react-app -V 使用create-react-app脚手架创建React应用程序：
react-native 搭建windows开发环境及报错解决办法
wanglun_的博客
10-17 2091
选择需要下载的SDK Platforms / SDK Tools，先勾选右下角Show Package Details。找到android\build.gradle文件，在 repositories添加一下两段代码即可。低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）。找到android\build.gradle文件，在 repositories添加以下代码即可。SDK Tools 栏勾选 Android SDK Build-Tools 34。
从零学React Native之01创建第一个程序
weixin_33851177的博客
08-02 121
本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native。大家应该对React Native有个初步的认识。 接下来我们就可以初始化一个React Native项目了。 创建项目 打开命令窗口，进入我们希望建立的项目目录所在的父目录后，输入命令 react-native ...
安装React Native环境遇到的坑
清颖的博客
04-09 2382
前几天安装了RN的环境，中间遇到了一些问题，全网搜索，各种途径找解决方法，折腾好一阵，终于解决了问题，总结分享。
npm下载react-native 慢
前端大橙子
10-01 1536
react-native使用npm加载文件过慢
D:\AwesomeProject>npm ls deprecated-react-native-listview AwesomeProject@0.0.1 D:\AwesomeProject `-- react-native-modal-dropdown@0.7.0 `-- deprecated-react-native-listview@0.0.5 这说明什么又怎么解决问题？
最新发布
08-01
<think>好的，我现在需要帮用户解决他们遇到的npm依赖问题。用户运行了`npm ls deprecated-react-native-listview`，结果显示`react-native-modal-dropdown@0.7.0`依赖了废弃的`deprecated-react-native-listview@0.0.5`。用户的问题是如何解决这个问题。 首先，我需要理解问题的根源。用户之前遇到了关于ScrollResponder的错误，这可能是因为他们使用的React Native版本（0.68）不再支持该模块，而`deprecated-react-native-listview`依赖于它。现在用户发现这个废弃的包是`react-native-modal-dropdown`的依赖，所以需要解决这个问题。 接下来，我应该考虑可能的解决方案。首先，用户需要更新或替换`react-native-modal-dropdown`，因为它的旧版本依赖了废弃的库。检查是否有新版本可用，如果有的话，升级到最新版本可能解决问题。如果最新版本仍然依赖旧包，可能需要寻找替代库或者手动修复。 另外，用户可能需要使用补丁工具如`patch-package`来临时修改依赖，但这不是长久之计。或者，用户可以考虑迁移到React Native的较新版本，但可能涉及更多改动。 还需要考虑用户的项目是否必须使用`react-native-modal-dropdown`，是否有其他替代库可以使用，比如`react-native-picker`或者`react-native-select-dropdown`，这些可能更维护良好，避免依赖废弃的库。 在回答时，要分步骤说明解决方案，包括检查更新、升级包、使用替代库、应用补丁等方法，并给出示例代码，比如如何替换`ListView`为`FlatList`，以及如何使用替代的下拉组件。 最后，确保用户理解根本原因，并提供相关问题供用户进一步参考。 </think>### 问题分析 通过 `npm ls deprecated-react-native-listview` 的输出可知： ``` AwesomeProject@0.0.1 D:\AwesomeProject └── react-native-modal-dropdown@0.7.0 └── deprecated-react-native-listview@0.0.5 ``` 这说明你的项目依赖链中存在 **`react-native-modal-dropdown@0.7.0`**，而它依赖了废弃的 `deprecated-react-native-listview@0.0.5`。 **根本原因**：`react-native-modal-dropdown@0.7.0` 是一个过时的库，其依赖的 `ListView` 组件在 React Native 0.68 中已被完全移除，导致构建失败。 --- ### 解决方案 #### ✅ 方法一：**升级 `react-native-modal-dropdown`（推荐）** 1. **检查最新版本** 查看 [npm 官网](https://www.npmjs.com/package/react-native-modal-dropdown) 或运行： ```bash npm view react-native-modal-dropdown versions ``` 若存在更高版本（如 `v0.9.0` 或 `v1.0.0`），升级到兼容 React Native 0.68 的版本： ```bash npm install react-native-modal-dropdown@latest # 或指定版本 npm install react-native-modal-dropdown@1.0.0 ``` 2. **验证依赖更新** 升级后运行： ```bash npm ls deprecated-react-native-listview ``` 若无输出，说明已成功移除废弃依赖。 #### ✅ 方法二：**替换为维护活跃的替代库** 如果 `react-native-modal-dropdown` 无兼容版本，建议替换为现代库： 1. **推荐替代方案** - [react-native-picker](https://github.com/react-native-picker/picker)（官方维护） - [react-native-select-dropdown](https://github.com/ArthurAssuncao/react-native-select-dropdown) 2. **安装新库** 以 `react-native-select-dropdown` 为例： ```bash npm install react-native-select-dropdown # 或 yarn yarn add react-native-select-dropdown ``` 3. **使用示例代码** ```javascript import SelectDropdown from 'react-native-select-dropdown'; <SelectDropdown data={["Option 1", "Option 2", "Option 3"]} onSelect={(selectedItem, index) => console.log(selectedItem, index)} buttonTextAfterSelection={(selectedItem, index) => selectedItem} rowTextForSelection={(item, index) => item} /> ``` #### ✅ 方法三：**手动移除废弃依赖（临时方案）** 如果无法升级或替换库，可强制移除废弃依赖（不推荐）： 1. **删除 `deprecated-react-native-listview`** ```bash npm uninstall deprecated-react-native-listview ``` 2. **修改 `react-native-modal-dropdown` 源码** - 找到 `node_modules/react-native-modal-dropdown` 中使用 `ListView` 的代码。 - 将 `ListView` 替换为 `FlatList` 或 `SectionList`（需手动修改源码）。 3. **使用 `patch-package` 保存修改** ```bash npx patch-package react-native-modal-dropdown ``` --- ### 验证步骤 1. **清除缓存并重建** ```bash npx react-native start --reset-cache npx react-native run-android ``` 2. **检查依赖树** ```bash npm ls deprecated-react-native-listview ``` --- ### 示例代码（替换 `ListView` 为 `FlatList`） #### 原始代码（使用 `ListView`）： ```javascript import ListView from 'deprecated-react-native-listview'; const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); <ListView dataSource={ds.cloneWithRows(data)} renderRow={(rowData) => <YourItemComponent />} /> ``` #### 修改后代码（使用 `FlatList`）： ```javascript import { FlatList } from 'react-native'; <FlatList data={data} renderItem={({ item }) => <YourItemComponent item={item} />} keyExtractor={(item, index) => index.toString()} /> ``` --- ### 总结 - **根本原因**：`react-native-modal-dropdown@0.7.0` 依赖废弃的 `ListView` 组件，与 React Native 0.68 不兼容。 - **推荐方案**：升级 `react-native-modal-dropdown` 或替换为现代库（如 `react-native-select-dropdown`）。 - **临时方案**：手动修改源码并使用 `patch-package` 修复，但需尽快迁移。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值