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.

• 向应用添加快速刷新和打包拆分指示器。

  ¥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 以外的名称怎么办？

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

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

¥You can set the "main" in package.json to any file within your project. If you do this, then you need to use registerRootComponent, 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);