跳至主内容

不使用框架的入门指南

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Platform support
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

如果现有框架无法满足您的特定需求，或者您希望编写自己的框架，您也可以在不使用任何框架的情况下创建 React Native 应用。

为此，您需要先设置开发环境。完成环境配置后，请按照以下步骤创建应用并开始开发。

步骤 1：创建新应用​

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

警告

如果你之前安装了全局的 react-native-cli 包，请立即卸载它，否则可能导致意外问题：

shell
npm uninstall -g react-native-cli @react-native-community/cli

您可以使用 React Native Community CLI 来生成新项目。让我们创建一个名为 "AwesomeProject" 的 React Native 项目：

shell
npx @react-native-community/cli@latest init AwesomeProject

注意：若您是将 React Native 集成到现有应用中，或已在项目中安装 Expo，或需要为现有 React Native 项目添加 Android 支持（参见与现有应用集成），则无需此步骤。您也可以使用第三方 CLI（如 Ignite CLI）来设置 React Native 应用。

信息

若在 iOS 环境中遇到问题，请尝试通过以下命令重新安装依赖：

  1. cd ios 进入 ios 目录
  2. bundle install 安装 Bundler
  3. bundle exec pod install 安装由 CocoaPods 管理的 iOS 依赖项

[可选] 使用特定版本或模板​

如需使用特定 React Native 版本创建项目，可添加 --version 参数：

shell
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X

您也可以通过 --template 参数使用自定义 React Native 模板启动项目，详见此处。

步骤 2：启动 Metro​

Metro 是 React Native 的 JavaScript 构建工具。请在项目目录中运行以下命令启动 Metro 开发服务器：

shell
npm start
备注

如果您熟悉 Web 开发，Metro 类似于 Vite 或 webpack 等打包工具，但专为 React Native 端到端设计。例如，Metro 使用 Babel 将 JSX 等语法转换为可执行的 JavaScript。

步骤 3：启动应用​

保持 Metro 打包进程在独立终端中运行。在 React Native 项目目录中打开新终端，运行以下命令：

shell
npm run android

如果所有配置正确，您将很快在 Android 模拟器中看到新应用运行。

这只是运行应用的一种方式——您也可以直接从 Android Studio 中启动应用。

技巧

若无法正常运行，请查阅故障排除页面。

步骤 4：修改应用​

应用成功运行后，让我们尝试修改它：

  • 在任意文本编辑器中打开 App.tsx 并修改部分代码

  • 双击 R 键或通过开发者菜单（Ctrl + M）选择 Reload 即可查看变更效果！

完成！​

恭喜！您已成功运行并修改了第一个基础版 React Native 应用。

后续步骤​

  • 如需将此 React Native 代码集成到现有应用中，请查阅集成指南。

  • 如果您想进一步了解 React Native，请查看 React Native 简介。