Question

React Native的新功能：我从Expo init开始了一个全新的项目，然后按照https://reactnavigation.org/docs/hello-react-navigation中提到的说明进行操作我使用expo start运行项目，但出现此错误。不变违规：“ main”尚未注册。如果发生以下情况，可能会发生这种情况：

Metro（本地开发服务器）从错误的文件夹运行。检查Metro是否正在运行，将其停止并在当前项目中重新启动。
由于错误而导致模块加载失败，并且未调用AppRegistry.registerComponent。

不变量 browser.js：38：14 runApplication AppRegistry.js：193：13 __callFunction MessageQueue.js：425：19 __guard $ argument_0 MessageQueue.js：112：6 __守卫 MessageQueue.js：373：10 callFunctionReturnFlushedQueue MessageQueue.js：111：4 callFunctionReturnFlushedQueue [本地代码]：0 有什么建议吗？

Answer 1

打开index.js，文件内容应该是这样的：

import { AppRegistry, Platform } from 'react-native';
import App from './App';

AppRegistry.registerComponent('X', () => App);

if (Platform.OS === 'web') {
    const rootTag = document.getElementById('root') || document.getElementById('X');
    AppRegistry.runApplication('X', { rootTag });
}

如果您遇到此错误 Invariant Violation: “main” has not been registered，您必须将 'X' 替换为 'main'。

另一个例子：

如果您遇到此错误 Invariant Violation: “app” has not been registered，您必须将 'X' 替换为 'app'。

安卓：

打开./android/app/src/main/java/[multiple folders]/MainActivity.java

/**
   * Returns the name of the main component registered from JavaScript.
   * This is used to schedule rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "X";
  }

'X' 和 MainActivity.java 的 index.js 必须匹配。

Answer 2

这对我有用：

删除node_modules和您的锁文件（package-lock.json / yarn.lock）
将package.json中的expo软件包版本更改为38.0.8
运行yarn或npm install
运行expo install react-native-safe-area-context

Answer 3

解决方法：

AppRegistry.registerComponent('main', () => App);

Answer 4

就我而言，我有一个类，该类仅用于对膳食结构进行建模，而不是反应类组件。我忘记导出该类，但在应用程序
new Meal(foo, bar .....)
中调用它并触发了此错误。我只是通过跟踪我在开始收到此错误之前所做的最新添加的步骤来找到它。

Answer 5

就我而言，当我打电话时问题就解决了

AppRegistry.registerComponent(appName.toLowerCase(), () => App);

在 index.js 中。所以看起来第一个参数是根据显示的错误消息传递的。就我而言，我的项目名称是 AwesomeProject，Metro 报告的错误是：

Invariant Violation: "awesomeproject" has not been registered.

所以我认为添加 toLowerCase() 可以解决问题，而且确实做到了！！

但是，当我尝试使用 npx react-native run-macos 在 macos 上运行它时遇到了这个问题，解决了这个问题后，我尝试调用 iOS 版本，然后我得到了 Invariant Violation: "AwesomeProject" has not been registered。

所以最后我通过如下注册两次应用程序使两者都工作：

AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);

同样适用于 npx react-native run-android。

Answer 6

问题在于，如果您正在使用expo，则必须以其他方式注册registerComponent。所有信息都在文档中。 https://docs.expo.io/versions/latest/sdk/register-root-component/

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

class App extends React.Component {
  render() {
    return <View />;
  }
}

registerRootComponent(App);

Answer 7

像这样从 app.json 导入应用名称：

import {name as appName} from './app.json';

然后在 registerComponent 中添加 appname

AppRegistry.registerComponent(appName, () => App);

Answer 8

在我的情况下，这是一个特定的软件包“ graphql-type-json”，这就是问题所在。因此，错误的第二部分是指实际问题：

由于错误而导致模块加载失败，并且未调用AppRegistry.registerComponent。“'

装入了该包的文件引发错误'GraphQLError：语法错误：预期名称，找到了“}”。停止了应用的加载并抛出了Invariant Violation错误。

在精确删除了graphql-type-json（yarn remove graphql-type-json）软件包之后，expo再次加载正常。

快乐编码

Answer 9

就我而言，我遗漏了一些必须安装的软件包。

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Answer 10

出现此错误的主要原因是，出于某种原因，App.js 无法正常运行。这可能是因为您从错误的文件夹运行服务器。就我而言，我总是在出现此错误的同时遇到另一个错误，因此我一直在修复这些错误，并且此错误已自动解决。

Answer 11

我初始化了新项目“awesomeproject”，然后将我同事的工作复制到其中。唯一的问题是 app.json 中的名称与项目名称不匹配。所以 app.json 有 "name": "supercoolproject" ，但 "name": "awesomeproject" 是预期的。只需仔细检查它是否匹配，如果不匹配，只需修复它，它可能会起作用。

Answer 12

更改index.js。

import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";
import { name as appName } from "./app.json";

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
  registerRootComponent(App);
} else {
  AppRegistry.registerComponent(appName, () => App);
}

不变违规：“ main”尚未注册

12 个答案: