创建react-native项目

最新推荐文章于 2025-07-02 11:02:21 发布
原创 最新推荐文章于 2025-07-02 11:02:21 发布 · 3.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-native

本文详细介绍了如何通过删除特定配置文件并使用 react-native init 命令来创建一个新的 React Native 项目。步骤包括删除 .yarnrc 和 .node_repl_history 文件、初始化 demo 项目、进入项目目录、运行 Android 版本以及验证是否成功。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、删除C:\Users\user\.yarnrc，C:\Users\user\.node_repl_history这两个文件

2、命令行中输入：react-native init demo

3、cd demo

4、react-native run-android

5、第一次等待编译完成

6、本地访问这个页面：http://localhost:8081/index.android.bundle?platform=android，结果如下所示，代表成功：

7、使用Android Studio访问，出现如下即可

创建你的首个React-Native 项目
asddavid的专栏
11-25 2628
react-native 项目
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该清理，构建并重新安装第三方依赖项，以使新...
如何新建一个React Native的项目
致未来的你。的博客
10-18 2375
如果你需要使用复杂的原生功能，或者希望完全掌控项目的原生部分，那么选择是最佳方案。如果你刚刚开始 React Native 开发，或者想快速搭建一个跨平台应用而不需要复杂的原生功能，那么使用Expo是非常方便的选择。
.npmrc和.yarnrc配置文件介绍：分别用于 Node.js 中的 npm（Node Package Manager）和 Yarn 包管理工具
最新发布
weixin_44638453的博客
07-02 568
npmrc和.yarnrc是两个配置文件，分别用于 Node.js 中的（Node Package Manager）和包管理工具。它们存储了与包管理相关的配置选项，允许用户自定义和控制包的安装、版本、缓存等行为。
React Native 环境部署 & 新建项目(Windows 2024)
m0_48925748的博客
10-05 3411
关于代理：全程基本不用挂，挂了反而容易出错误流程：配置环境 -> 新建项目 -> 修改项目文件(国内) -> 启动资料查找：官网（国内外）、git hub、AI tools、csdn...​​​​​​​。
React Native 开发项目初体验
qq_42072014的博客
07-28 1372
通过本文的介绍，你已经完成了从创建 React Native 项目到实现基本功能的整个过程。React Native 为开发者提供了一种快速构建高质量原生应用的方式，无论你是新手还是经验丰富的开发者，React Native 都是一个值得探索的选择。
创建React-Native 项目
BA陈的博客
07-07 612
适用版本：React Native 0.62 安装yarn 可以不安装 npm install -g yarn Android配置环境变量 配置 ANDROID_HOME 环境变量 添加环境变量： %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin 创建React-native 项目 如果全局安装过旧的react-native-cli命令行工具，请使用npm
react-native-android-fragment:使用XML将本机Android片段公开给React-Native
05-16
安装这个库非常简单，只需要运行`yarn`或`npm install`命令，然后通过`react-native link`进行链接，这将自动配置项目中的依赖和链接Java模块。 集成过程如下： 1. 添加依赖：在`android/settings.gradle`中引入`...
react-native-svg-parser:解析SVG文件并将其转换为'react-native-svg'格式的对象。 笔记
04-26
创建该项目是为了使其易于与项目一起使用现有的SVG文件，该项目仅支持SVG的一个子集，并且不提供直接从SVG / XML格式文件呈现SVG的方法。 安装 npm i @target-corp/react-native-svg-parser 用法 import ...
React-native1创建工程
levine_hhb的博客
07-26 223
1.初始化项目 react-native init studyPro 执行该命令，将会自动创建一个项目。 2.运行iOS react-native run-ios 3.运行安卓 react-native run-android
aspen plus入门教程(pdf)
08-07
aspen plus 参考手册(pdf) 术语对照(pdf) 入门教程(pdf) 操作手册， 最适合零基础，入门学习aspen plus软件。
react native项目创建
keen_zuxwang的博客
05-08 1827
react native项目创建、运行、调试 1、项目命令行创建、运行 react-native init myrnprj1 // 创建工程 cd myrnprj1 react-native start // 开启packager服务--Running packager on port 8081. //浏览器地址栏输入：http://localhost:8081/
命令行 创建 React Native 项目
拾贝壳
03-06 520
1、在 React Native 中文版文档0.51 中，创建项目用如下命令： npm install -g yarn react-native-cli react-native init AwesomeProject cd AwesomeProject react-native run-android 2、在 React Native 英文版0.55中，创建项目用如下命令： npm in
React-native android App项目搭建
qq_45859670的博客
08-11 1816
在这里我采用的是真机模拟（用数据线把手机与电脑相连，手机打开usb调试，同意调试，一般需要用到手机开发者模式）后面你再写代码，这个会自动打包，手机上也会自动更新。之后再用手机连接时，只要你的软件还没卸载，就不用再次安装。注意：如果采用android真机模拟，可以晃一晃手机，看以看到菜单。弊端：不能查看标签结构，不能直接（可以解决）查看网络请求。还没结束，手机会受到一安装包，手机安装后，加载完毕之后。点击Debug就可以，也有其他快捷键可以上网搜一下。选择对应的版本，进行解压，点击。直接在官网上下就行了。..
React-Native项目工程搭建
mapbar_front的博客
01-16 2164
任何一个项目的搭建，都是考验一个程序员的技术功底，而 React-Native 也不例外。同时，搭建一个 React-Native 的项目工程，其实要比普通的 Web 项目更难一些，因为 React-Native 是一个新的体系，基本它的底层机制和 H5 完全不同，无论是本地存储，还是运行环境，都需要我们熟悉它。
React Native 开发系列第一篇（1）—— 创建一个app，并使用Andoird开启
weixin_46086458的博客
03-04 2205
搭建好RN必备环境之后要怎么创建一个RN项目？Android 能正常启动，但是ios 却启动不了？pod update更新总是卡壳？一文解答你创建 React Native项目并启动时会遇到的情况和问题。希望能给大家带来帮助，欢迎随时交流！
ReactNative创建项目
SkySmile1992的博客
01-23 328
使用 React Native 命令行工具来创建一个名为"MyApp"的新项目： react-native init MyApp 提示：你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。 ...
react-native三种创建组建的方式
Arnly的博客
10-07 564
方法一：ES6创建组件export default class HolleCompany extends Component{ render() { return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> ); } }方法二：ES5创建组建
安装react-native项目
06-12
### 如何安装和配置 React-Native 项目 React-Native 是一个用于构建跨平台移动应用的框架，支持 iOS 和 Android 平台。以下是关于如何安装和配置 React-Native 项目的详细指南。 #### 环境准备 在开始之前，确保开发环境已经满足以下条件： - 安装 Node.js 和 npm 或 yarn。 - 安装 JDK（对于 Android 开发）。 - 安装 Xcode（对于 iOS 开发）。 - 安装 Android Studio（对于 Android 开发），并配置好 Android SDK 和 NDK。 #### 创建 React-Native 项目 使用 `npx` 或全局安装的 `react-native-cli` 工具来创建一个新的 React-Native 项目： ```bash npx react-native init MyProjectName ``` 这将初始化一个新的 React-Native 项目，并自动安装必要的依赖项[^5]。 #### 安装额外的依赖库 根据项目需求，可以安装一些常用的第三方库，例如矢量图标库 `react-native-vector-icons`。可以通过以下命令安装该库： ```bash npm install react-native-vector-icons --save ``` 或者使用 Yarn： ```bash yarn add react-native-vector-icons ``` 完成安装后，需要对 Android 和 iOS 项目进行链接操作。对于 Android 项目，需修改 `android/app/build.gradle` 文件，添加以下内容： ```gradle project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') ``` 对于 iOS 项目，可以直接运行以下命令完成链接： ```bash npx pod-install ios ``` #### 配置自定义字体 如果需要在项目中使用自定义字体，可以参考以下步骤： 1. 将字体文件放入 `assets/fonts` 目录。 2. 在 `react-native.config.js` 文件中添加字体配置： ```javascript module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], }; ``` 3. 运行以下命令以链接字体资源： ```bash npx react-native link ``` #### 集成热更新工具 为了实现应用的热更新功能，可以集成 `react-native-code-push` 插件。首先安装插件： ```bash npm install react-native-code-push --save ``` 然后配置 Android 和 iOS 项目。对于 Android 项目，修改 `android/app/build.gradle` 文件： ```gradle project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app') ``` 对于 iOS 项目，需手动添加 `CodePush` 框架到工程中，并配置相关参数[^2]。 #### 启动开发服务器 完成上述配置后，可以启动开发服务器并运行项目： ```bash npx react-native start ``` 在另一终端窗口中运行以下命令启动应用： ```bash npx react-native run-android ``` 或 ```bash npx react-native run-ios ``` ### 注意事项 - 如果遇到依赖冲突问题，可以尝试删除 `node_modules` 目录并重新安装依赖： ```bash rm -rf node_modules && npm install ``` - 对于 iOS 项目，建议定期运行 `pod install` 命令以确保依赖正确安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值