registerRootComponent

一个通用组件，允许将初始 React 组件设置为在应用的根 React Native 视图中进行原生渲染。

设置初始 React 组件，使其在 Android、iOS 和 Web 平台上的应用根 React Native 视图中进行原生渲染。它还添加了仅供开发者使用的调试工具，以便与 npx expo start 一起使用。

¥Sets the initial React component to render natively in the app's root React Native view on Android, iOS, and the web. It also adds dev-only debugging tools for use with npx expo start.

安装

¥Installation

Android 手动设置

¥Manual Android setup

仅当你的应用不使用 Expo 预建 持续生成 android 目录时才需要此函数。

¥This is only required if your app does not use Expo Prebuild to continuously generate the android directory.

更新 android/app/src/main/your-package/MainActivity.java 文件，在 getMainComponentName 函数中使用名称 main。

¥Update the android/app/src/main/your-package/MainActivity.java file to use the name main in the getMainComponentName function.

  @Override
  protected String getMainComponentName() {
+    return "main";
  }

iOS 手动设置

¥Manual iOS setup

仅当你的应用不使用 Expo 预建 持续生成 ios 目录时才需要此函数。

¥This is only required if your app does not use Expo Prebuild to continuously generate the ios directory.

更新 iOS ios/your-name/AppDelegate.(m|mm|swift) 文件，在 application:didFinishLaunchingWithOptions: 函数的 createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps 行中使用 moduleName main。

¥Update the iOS ios/your-name/AppDelegate.(m|mm|swift) file to use the moduleName main in the createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps line of the application:didFinishLaunchingWithOptions: function.

API

import { registerRootComponent } from 'expo';

registerRootComponent(component)

设置初始 React 组件，以便在应用的根 React Native 视图 (RCTView) 中进行原生渲染。

¥Sets the initial React component to render natively in your app's root React Native view (RCTView).

此函数执行以下操作：

¥This function does the following:

• 调用 React Native 的 AppRegistry.registerComponent

  ¥Invokes React Native's AppRegistry.registerComponent

• 在 Web 上调用 React Native Web 的 AppRegistry.runApplication 来渲染到根 index.html 文件。

  ¥Invokes React Native web's AppRegistry.runApplication on web to render to the root index.html file.

• 全局填充 process.nextTick 函数。

  ¥Polyfills the process.nextTick function globally.

• 添加对使用 fontFamily React Native 样式和 expo-font 包的支持。

  ¥Adds support for using the fontFamily React Native style with the expo-font package.

此函数还添加了以下仅适用于开发环境的功能，这些功能在生产软件包中已被移除。

¥This function also adds the following dev-only features that are removed in production bundles.

• 为应用添加快速刷新和 bundle 拆分指示器。

  ¥Adds the Fast Refresh and bundle splitting indicator to the app.

• 如果 expo-updates 软件包配置错误，则进行断言。

  ¥Asserts if the expo-updates package is misconfigured.

• 在浏览器中运行时，如果 react-native 未设置为 react-native-web 的别名，则断言此方法。

  ¥Asserts if react-native is not aliased to react-native-web when running in the browser.

参数

¥Arguments

• 组件 (ReactComponent)：用于渲染应用其余部分的 React 组件类。

  ¥component (ReactComponent): The React component class that renders the rest of your app.

返回值

¥Returns

无返回值。

¥No return value.

常见问题

¥Common questions

如果我想将主应用文件命名为 App.js 或 app/_layout.tsx 以外的名称，该怎么办？

¥What if I want to name my main app file something other than App.js or app/_layout.tsx?

对于不使用 Expo 路由 的项目，你可以将 package.json 中的 "main" 设置为项目中的任何文件。如果你这样做，则需要使用 registerRootComponent。如果你使用自定义入口文件，export default 不会将此组件设置为应用的根。

¥For projects that do not use Expo Router, you can set the "main" in package.json to any file within your project. If you do this, then you need to use registerRootComponent. The export default will not make this component the root for the app if you are using a custom entry file.

例如，假设你想将 src/main.jsx 作为应用的入口文件 - 也许你不喜欢在项目根目录中放置 JavaScript 文件。首先，在 package.json 中设置以下内容：

¥For example, let's say you want to make src/main.jsx the entry file for your app — maybe you don't like having JavaScript files in the project root. First, set this in package.json:

{
  "main": "src/main.jsx"
}

然后，在 src/main.jsx 中，确保调用 registerRootComponent 并传入要在应用根目录渲染的组件：

¥Then, in src/main.jsx, make sure you call registerRootComponent and pass in the component you want to render at the root of the app:

import { registerRootComponent } from 'expo';
import { View } from 'react-native';

function App() {
  return <View />;
}

registerRootComponent(App);

对于使用 Expo 路由 的项目，你可以按照 Expo Router 安装指南 中的以下步骤创建自定义入口点。要使用 Expo Router 项目中的顶层 src 目录，请参阅 src 目录引用 了解更多信息。

¥For projects that use Expo Router, you can create a custom entry point by following these steps from Expo Router's installation guide. To use the top-level src directory in your Expo Router project, see src directory reference for more information.