如何新建一个React Native的项目

要新建一个 React Native 项目,你可以使用 React Native 官方推荐的工具 React Native CLI 或者 Expo。两者的区别在于:React Native CLI 提供更多对原生代码的访问权限,适合构建复杂的应用;而 Expo 是一个开发工具链,简化了许多设置,非常适合快速启动项目,尤其是小型应用或原生功能需求不高的项目。

下面我将分别介绍如何使用 React Native CLIExpo CLI 来创建一个新的 React Native 项目。

方法 1:使用 React Native CLI

1. 安装必要的工具

你需要安装以下工具:

  • Node.js :JavaScript 运行时,可以从 Node.js 官网下载并安装。
  • React Native CLI:命令行工具,用于创建和管理 React Native 项目。
  • Android Studio (用于 Android 开发)或 Xcode(用于 iOS 开发)。如果只开发 Android 应用,安装 Android Studio 即可。
2. 安装 React Native CLI

打开终端(或命令行窗口),运行以下命令来全局安装 React Native CLI:

bash 复制代码
npm install -g react-native-cli
3. 创建一个新项目

运行以下命令以创建一个新的 React Native 项目,项目名称可以根据你需求自定义:

bash 复制代码
npx react-native init MyNewProject

这将创建一个名为 MyNewProject 的新 React Native 项目。

4. 运行项目

在项目目录下执行以下命令来启动应用:

  • 运行 Android 模拟器

    首先确保你已经打开了 Android Studio 并配置好 Android 虚拟设备(AVD)。然后,运行:

    bash 复制代码
    npx react-native run-android
  • 运行 iOS 模拟器

    如果你在 macOS 上并安装了 Xcode,可以使用以下命令运行 iOS 模拟器:

    bash 复制代码
    npx react-native run-ios

    注:要运行 iOS 应用,你需要在 macOS 上,并且安装了 Xcode。

5. 开发与调试

一旦模拟器成功启动,你就可以开始在项目文件夹的 App.js 文件中编写代码。每当你保存更改时,React Native 将自动热更新你的应用,无需重新编译。

方法 2:使用 Expo CLI

如果你不需要使用复杂的原生功能,或希望快速开始开发,Expo 是更简单的一种方式,它不需要在初期配置 Android Studio 或 Xcode。

1. 安装 Expo CLI

运行以下命令安装 Expo CLI 工具:

bash 复制代码
npm install -g expo-cli
2. 创建一个新项目

运行以下命令创建一个新的 Expo 项目:

bash 复制代码
expo init MyNewProject

接下来会提示你选择一个模板(例如空白模板或带有一些示例代码的模板)。选择适合你的项目的模板。

3. 进入项目目录
bash 复制代码
cd MyNewProject
4. 启动项目

运行以下命令启动项目:

bash 复制代码
expo start

这将启动一个开发服务器,你可以使用 Expo Go 应用在 Android 或 iOS 设备上扫码运行你的应用,或者直接在浏览器中查看调试信息。

  • 如果你要在 iOS 模拟器Android 模拟器 上运行,可以选择在 Expo 提供的界面中点击对应的按钮:
    • Press i to open iOS simulator (on macOS).
    • Press a to open Android emulator (if you have one installed).
5. 开发与调试

和 React Native CLI 类似,你可以直接编辑项目中的 App.js 文件,保存后应用会自动刷新更新。

React Native CLI 和 Expo 的对比

功能 React Native CLI Expo CLI
复杂的原生功能 适合,允许直接修改原生代码 限制较多,不适合需要自定义原生功能的项目
开发体验 需要设置模拟器(Android Studio/Xcode) 更简单的设置,无需复杂的原生环境
构建流程 手动设置构建环境,需要更多配置 自动化构建流程,适合快速原型开发
调试设备 支持通过模拟器和物理设备调试 支持通过 Expo Go 应用进行快速调试
代码共享性和性能 可直接与原生代码交互,性能更优 性能稍逊色,但开发速度较快
适用场景 复杂、原生功能丰富的应用 简单、快速开发或轻量级的应用

总结

如果你需要使用复杂的原生功能,或者希望完全掌控项目的原生部分,那么选择 React Native CLI 是最佳方案。如果你刚刚开始 React Native 开发,或者想快速搭建一个跨平台应用而不需要复杂的原生功能,那么使用 Expo 是非常方便的选择。

相关推荐
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo1 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员1 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
Jackson_Mseven1 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
pe7er2 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er2 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz2 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端2 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛3 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http