跳到主要内容
版本:0.81

无需框架即可开始

Platform support
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 Community 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/cli@X.XX.X 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 键或从开发菜单中选择 ReloadCtrl + M)以查看你的更改!

就是这样!

恭喜!你已经成功运行并修改了你的第一个裸机 React Native 应用。

接下来做什么?

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