不變違規：“main”尚未注冊

Question

React Native 的新手：我使用 Expo init 啟動了一個全新的項目，然后我按照 https://reactnavigation.org/docs/hello-react-navigation 中提到的說明運行了 expo 啟動項目，我收到了這個錯誤。 不變違規：“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 __guard 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：

打開./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";
  }

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

Answer 2

這對我有用：

1. 刪除 node_modules 和你的鎖文件（package-lock.json / yarn.lock）
2. 將 package.Z466DEEC76ECDF5FCA6D38571F6384 中的 expo package 版本更改為
3. 運行紗線或 npm 安裝
4. 運行 expo 安裝 react-native-safe-area-context

Answer 3

問題是，如果您使用的是 expo，那么您必須以不同的方式注冊組件。 所有信息都在文檔中。 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 4

就我而言，當我打電話時問題就解決了

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 5

就我而言，我缺少一些必須安裝的軟件包。

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

Answer 6

解決方法：

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

Answer 7

就我而言，這是一個名為graphql-type-json的特定 package 問題。 所以錯誤的第二部分是指真正的問題：

• 由於錯誤而無法加載模塊並且未調用AppRegistry.registerComponent 。"'

加載有罪的 package 引發錯誤“GraphQLError：語法錯誤：預期名稱，找到“}”。 這停止了應用程序加載並引發了 Invariant Violation 錯誤。

精確刪除 graphql-type-json (yarn remove graphql-type-json) package, expo 后再次加載正常。

Answer 8

就我而言，我有一個 class 僅存在於 model 膳食結構中，即不是反應 class 組件。 我忘記導出 class 但在應用程序中調用它
new Meal(foo, bar.....)
這觸發了這個錯誤。 我只是通過跟蹤我在開始收到此錯誤之前所做的最新添加的步驟來找到它。

Answer 9

更改您的 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);
}

Answer 10

從app.json導入應用名稱，如下所示：

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

然后在 registerComponent 中添加 appname

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

Answer 11

出現此錯誤的主要原因是，由於某種原因，App.js 無法正常運行。 這可能是因為您從錯誤的文件夾運行服務器。 就我而言，我總是遇到另一個錯誤以及這個錯誤，所以我一直在修復這些錯誤，這個錯誤得到了自動解決。

Answer 12

如果您使用的是react-native-reanimated reanimated 和 Expo，請確保使用以下命令安裝它：

expo install react-native-reanimated

請參閱文檔以獲取更多幫助

Answer 13

它可能發生在您使用expo prebuild --clean並且在您的Podfile / AppDelegate.m中是某些第三方庫特定導入時，例如react-native-maps或Google Maps API Key 。

您需要將這些導入Podfile / AppDelegate.m ，下一個cd ios ，下一個pod install 。 盡管如此， expo start可能還不夠，您需要使用Xcode構建您的項目。 在Xcode上構建並運行代碼后，錯誤將消失，模擬器將啟動。

Expo和Xcode構建/模擬應用程序的方式之間存在一些差異，但我在區分這些差異方面處於相當早期的階段。 我還注意到有時您需要首先在Xcode上構建項目，如果該應用程序尚未安裝在simulator上，然后才從通過expo start --dev-client的模擬器運行應用程序。 否則，我收到錯誤Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. 或Invariant Violation: Native module cannot be null. 或Invatian Violation: 'main' has not been registered...

Answer 14

If you have changed the application and package name using react-native-rename , in the file ios/AppName/AppDelegate.mm Synchronize the application name with the app.json file by finding the line UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"AppName", nil);

Answer 15

我不擅長診斷這些堆棧跟蹤，但我的項目突然開始拋出這個錯誤。 我安裝了react-native-skeleton-content ，然后在這里為react-native-gesture-handler拋出錯誤我認為手勢處理程序只是其他一些對等依賴項更新的結果。

我都卸載了，瞧。 expo 服務器再次運行並正常處理應用程序。 如果我睡在上面，我永遠不會知道，但是，作為一個新手，嘗試刪除你剛剛安裝的新 package 及其依賴項。 這可能是新問題的原因。

Answer 16

index.js

AppRegistry.registerComponent("X", () => Root);

如果您在Android中遇到此問題，請確保mainactivity.java和index.js具有相同的“X”

mainActivity.java

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

如果您在iOS中遇到此問題，請確保AppDelegate.m和index.js都具有相同的“X”

AppDelegate.m

 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"X" initialProperties:nil];

Answer 17

我終於找到了適合我的解決方案！

我只是再次執行它：

npm install -g expo-cli

ps.：就我而言，這可能是因為我嘗試安裝 Turtle CLI 並且不得不將其刪除以釋放磁盤空間。 這可能損壞了 expo 文件。

Answer 18

對於 iOS，我們需要在ios>appName>AppDelegate.mm文件中進行一項額外的更改，

搜索RCTAppSetupDefaultRootView並將old_app_name更新為new_app_name