不变违规：运行 react-native 应用程序时尚未注册“main”

Question

这是我的文件夹结构。我已经用 expo 启动了这个应用程序。由于以下错误，我无法以某种方式运行它。

Rootstack.js

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';


import LoginComponent from "../component/login/login";
import HomeComponent from "../component/home/home"

const AuthNav = createStackNavigator({
    Login:{
        screen : LoginComponent,
        navigationOptions:{
            headerShown: false
        }
    },
});

const AppNav = createStackNavigator({
    Home:{
        screen : HomeComponent,
        tabBarLabel: 'Home',
        navigationOptions:{
            headerShown: false
        }
    },
   
});

const switchNav = createSwitchNavigator({
    AuthNav,
    AppNav
},{
    initialRouteName:"AuthNav"
});


export default switchNav;

堆栈文件夹中的 App.js

import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);

export default createAppContainer(App);

主应用程序.js

import App from './src/App.js';
export default App;

错误

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

错误 2

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

我在这里做错了什么。

Answer 1

您在这里看到的有意义的例外是：

<块引用>

Invariant Violation: 试图注册两个同名的视图 RNCSafeAreaProvider

"main" has not been registered 是一个红鲱鱼，它只是因为另一个错误而发生。

发生 RNCSafeAreaProvider 异常是因为您的应用中有多个 react-native-safe-area-context 副本。除了将其安装在您的应用程序中之外，您可能正在使用包含它作为依赖项的库。如果您使用纱线，您可以运行 yarn why react-native-safe-area-context 来查看它的来源。尝试运行 expo install react-native-safe-area-context，如果这没有帮助，您可以使用纱线分辨率来覆盖依赖于它的包所使用的版本。

Answer 2

该问题很可能与多次注册您的应用有关。

1. 在 RootStack.js 中保留所有导航逻辑，并避免在 app.js

   中使用 createAppContainer()

2. AppRegistry.registerComponent('main',() => App) 应该是配置导航后的最终语句。

3. 将 App.js 导入主 app.js 意味着您要注册主组件两次（您应该只有一个输出文件）。 React 使用 index.js 作为默认输出。

在堆栈文件夹中使用这个代替 App.js：

import { createAppContainer } from 'react-navigation'
import App from './stack/RootStack'

//Remove these 2 lines below
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);

export default createAppContainer(App);

在你的主 app.js 中

import App from './src/App.js';
// Use it here
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('main',() => App);
export default App;