安装react-native命令和创建

本文介绍如何使用react-native-cli工具安装React Native并创建项目,通过指定国内镜像加速NPM依赖安装,最后演示如何运行第一个React Native应用。
安装react-native命令行工具react-native-cli
1)   在命令行中进入你希望React-Native安装的目录
2)   输入git clone https://github.com/facebook/react-native.git
3)   进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g
安装好之后,可以命令行下就有react-native命令了

使用NPM(Node.js包管理工具)安装依赖时速度特别慢,在安装时可以手动指定从镜像服务器获取资源,我们可以使用阿里巴巴在国内的镜像服务器,命令如下:

npm install -g --registry=http://registry.npm.taobao.org

只需要使用–registry参数指定镜像服务器地址,为了避免每次安装都需要--registry参数,可以使用如下命令进行永久设置:

npm config set registry http://registry.npm.taobao.org
换了国内镜像,安装速度就很快了

淘宝npm镜像官网:https://npm.taobao.org/

第一种:创建RN项目  react-native init testProject 

运行package   

在命令行中进入项目目录,输入react-native start

 http://localhost:8081/index.android.bundle?platform=android
运行项目  
刚刚运行package的命令行不要关闭,重新启动一个新的命令行
进入项目目录,输入react-native run-android

等待运行(如果是第一次运行,首先会下载gradle,时间较长)

### 如何安装配置 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、付费专栏及课程。

余额充值