通用组件，允许将初始 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.

• Polyfills console.log 通过 /logs 将日志发送到开发服务器

  ¥Polyfills console.log to send logs to the dev server via /logs

参数

¥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.js" 作为应用的入口文件 - 也许你不喜欢在项目根目录中包含 JavaScript 文件。首先，在 package.json 中设置：

¥For example, let's say you want to make "src/main.js" 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.js"
}

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

¥Then in "src/main.js", 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);