跳到主要内容

无需框架开始使用

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

如果你的约束条件通过 框架 无法很好地满足，或者你更喜欢编写自己的框架，则可以在不使用框架的情况下创建 React Native 应用。

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

步骤 1：创建新应用​

如果你之前全局安装过 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 来设置你的 React Native 应用程序，例如 Ignite CLI。

信息

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

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

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

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

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

你还可以使用自定义 React Native 模板启动项目，使用 --template 参数，阅读更多 此处。

步骤 2：启动 Metro​

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

shell
npm start
注意

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

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

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

shell
npm run android

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

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

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

步骤 4：修改你的应用​

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

  • 在你的首选文本编辑器中打开 App.tsx 并编辑一些行。
  • 按 R 键两次或从 Dev 菜单 (Ctrl + M) 中选择 Reload 以查看你的更改！

就这样！​

恭喜你！你已成功运行并修改了你的第一个简易 React Native 应用。

接下来做什么？​

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