跳至主要内容

无框架入门

平台支持
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

如果您遇到框架无法很好满足的限制，或者您更喜欢编写自己的框架，则可以创建一个不使用框架的 React Native 应用。

为此，您首先需要设置您的开发环境。设置完成后，请继续执行以下步骤以创建应用程序并开始开发。

步骤 1：创建新应用程序​

如果您之前安装了全局 react-native-cli 包，请将其删除，因为它可能会导致意外问题。

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

您可以使用React Native 社区 CLI 生成一个新项目。让我们创建一个名为“AwesomeProject”的新 React Native 项目。

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

如果您将 React Native 集成到现有应用程序中，或者您已在项目中安装了Expo，或者您正在为现有 React Native 项目添加 Android 支持（请参阅与现有应用程序集成），则无需执行此操作。您还可以使用第三方 CLI 设置您的 React Native 应用，例如Ignite CLI。

信息

如果您在 iOS 上遇到问题，请尝试通过运行以下命令重新安装依赖项：

  1. cd ios 导航到 ios 文件夹。
  2. bundle install 安装Bundler
  3. bundle exec pod install 安装由 CocoaPods 管理的 iOS 依赖项。

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

如果您想使用特定 React Native 版本启动新项目，可以使用 --version 参数。

npx @react-native-community/[email protected] init AwesomeProject --version X.XX.X

您还可以使用 --template 参数使用自定义 React Native 模板启动项目，此处了解更多信息。

步骤 2：启动 Metro​

Metro 是 React Native 的 JavaScript 构建工具。要启动 Metro 开发服务器，请从您的项目文件夹中运行以下命令：

npm start
注意

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

步骤 3：启动您的应用程序​

让 Metro Bundler 在其自己的终端中运行。在您的 React Native 项目文件夹中打开一个新终端。运行以下命令：

npm run android

如果一切设置正确，您应该很快就能在您的 Android 模拟器上看到您的新应用程序正在运行。

这是一种运行应用程序的方法 - 您也可以直接从 Android Studio 中运行它。

如果您无法使其正常工作，请参阅故障排除页面。

步骤 4：修改您的应用程序​

现在您已成功运行了该应用程序，让我们对其进行修改。

  • 在您选择的文本编辑器中打开 App.tsx 并编辑一些行。
  • 按两次 R 键或从开发菜单 (Ctrl + M) 中选择“重新加载”以查看您的更改！

就是这样！​

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

接下来做什么？​

  • 如果您想将此新的 React Native 代码添加到现有应用程序中，请查看集成指南。
  • 如果您想了解有关 React Native 的更多信息，请查看React Native 简介。