Skip to main content

无需框架即可开始使用

Platform support
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

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

¥If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework.

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

¥To do so, you'll first need to set up your environment. Once you're set up, continue with the steps below to create an application and start developing.

步骤 1：创建一个新应用​

¥Step 1: Creating a new application

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

¥If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

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

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

¥You can use React Native Community CLI to generate a new project. Let's create a new React Native project called "AwesomeProject":

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

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

¥This is not necessary if you are integrating React Native into an existing application, or if you've installed Expo in your project, or if you're adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to set up your React Native app, such as Ignite CLI.

信息

如果你在使用 iOS 时遇到问题，请尝试运行以下命令来重新安装依赖：

¥If you are having trouble with iOS, try to reinstall the dependencies by running:

  1. cd ios 导航到 ios 文件夹。

    ¥cd ios to navigate to the ios folder.

  2. bundle install 安装 打包器

    ¥bundle install to install Bundler

  3. bundle exec pod install 安装由 CocoaPods 管理的 iOS 依赖。

    ¥bundle exec pod install to install the iOS dependencies managed by CocoaPods.

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

¥[Optional] Using a specific version or template

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

¥If you want to start a new project with a specific React Native version, you can use the --version argument:

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

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

¥You can also start a project with a custom React Native template with the --template argument, read more here.

步骤 2：启动 Metro​

¥Step 2: Start Metro

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

¥Metro is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:

shell
npm start
注意

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

¥If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses Babel to transform syntax such as JSX into executable JavaScript.

步骤 3:开始你的应用​

¥Step 3: Start your application

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

¥Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

shell
npm run android

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

¥If everything is set up correctly, you should see your new app running in your Android emulator shortly.

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

¥This is one way to run your app - you can also run it directly from within Android Studio.

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

¥If you can't get this to work, see the Troubleshooting page.

步骤 4:修改你的应用​

¥Step 4: Modifying your app

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

¥Now that you have successfully run the app, let's modify it.

  • 在你选择的文本编辑器中打开 App.tsx 并编辑一些行。

    ¥Open App.tsx in your text editor of choice and edit some lines.

  • 按 R 键两次或从开发菜单中选择 Reload (Ctrl + M) 以查看你的更改！

    ¥Press the R key twice or select Reload from the Dev Menu (Ctrl + M) to see your changes!

就是这样！​

¥That's it!

恭喜！你已成功运行并修改了第一个 React Native 准系统应用。

¥Congratulations! You've successfully run and modified your first barebone React Native app.

怎么办？​

¥Now what?

  • 如果你想将这个新的 React Native 代码添加到现有应用中，请查看 集成指南。

    ¥If you want to add this new React Native code to an existing application, check out the Integration guide.

  • 如果你想了解有关 React Native 的更多信息，请查看 React Native 简介。

    ¥If you're curious to learn more about React Native, check out the Introduction to React Native.