创建 React Native 项目：深入理解和最佳实践

辰火流光
1,259 阅读3分钟

React Native 为开发者提供了构建跨平台移动应用的强大工具。在开始一个新项目时，选择正确的项目创建方法至关重要。本文将详细探讨两种主要的创建方式：使用 Expo 和 React Native CLI，并指导您完成项目创建的整个过程。

Expo vs React Native CLI：深入比较

Expo

Expo 是一个围绕 React Native 构建的综合开发平台，旨在简化开发过程。

优点：

  1. 快速启动：无需复杂的环境配置，可以立即开始开发。
  2. 跨平台一致性：提供统一的 API，简化了跨平台开发。
  3. OTA 更新：支持远程推送更新，无需通过应用商店。
  4. 丰富的内置功能：提供许多预配置的特性，如推送通知、相机访问等。

缺点：

  1. 限制性：某些原生功能可能受限，不适合需要深度定制的项目。
  2. 包大小：由于包含了完整的 Expo 运行时，应用体积较大。
  3. 版本依赖：更新 Expo SDK 可能需要同时更新多个依赖。

React Native CLI

React Native CLI 是官方的命令行工具，提供了更直接的项目控制。

优点：

  1. 完全控制：可以直接访问和修改原生代码。
  2. 性能优化：能够针对特定平台进行深度优化。
  3. 自由集成：可以轻松集成任何第三方库或原生模块。

缺点：

  1. 设置复杂：初始配置和环境搭建较为繁琐。
  2. 维护成本：需要单独管理 iOS 和 Android 项目。
  3. 学习曲线：需要更多关于原生开发的知识。

选择 React Native CLI

基于项目的长期可扩展性和对原生功能的需求，我们选择使用 React Native CLI 创建项目。这种方法虽然初期设置较为复杂，但为未来的开发提供了更大的灵活性。

创建项目步骤

1. 初始化项目

使用以下命令创建新项目：

npx react-native init pixiu_react_native_template

注意：项目名称应使用下划线（_）或驼峰命名法，避免使用连字符（-）。

image.png

2. 配置 Gradle 镜像加速

为提高依赖下载速度，我们使用阿里云镜像。

修改 Gradle 配置：

编辑 android/gradle/wrapper/gradle-wrapper.properties：

distributionUrl=https\://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.6-all.zip

image.png

更新 Maven 仓库：

编辑 android/build.gradle，在 repositories 块中添加：

maven { url 'https://maven.aliyun.com/nexus/content/groups/public/' }

同时，注释掉 mavenCentral()。这样可以优先使用阿里云镜像，大幅提升依赖下载速度。

image.png

现在，我们用 Android Studio 编辑器打开android目录，可以看到安装Gradle速度非常快

image.png

直到我们的项目构建完

image.png

3. 配置 JDK 17

React Native 最新版本推荐使用 JDK 17。配置步骤如下：

编辑 android/gradle.properties，添加：

org.gradle.java.home=D:\\tools\\Java\\jdk-17

请确保路径指向您的 JDK 17 安装目录。

image.png

同时，检查 Windows 注册表中 HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\JDK 的 JavaHome 路径是否正确设置为 JDK 17 路径。这确保了系统级别的 Java 配置正确。

image.png

4. 启动项目

完成配置后，在项目根目录运行：

npm run android

这将编译项目并在模拟器或连接的设备上启动应用。

image.png

image.png

结论

通过使用 React Native CLI 创建项目，我们为应用开发奠定了坚实的基础。虽然初始设置可能较为复杂，但这种方法提供了最大的灵活性和控制力，特别适合需要深度定制和优化的长期项目。记住，选择正确的工具和配置对于项目的成功至关重要。随着您在 React Native 开发中积累更多经验，您将能够更好地利用这个强大平台的全部潜力。

avatar
文章
阅读
粉丝