跳到主要内容
版本:0.77

不使用框架开始使用

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 介绍