Реагировать на собственную ошибку при создании нижней навигации

Question

Я пытаюсь создать Bottom Navigation в своем собственном проекте. Я получаю эту ошибку

Инвариантное нарушение: недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но полученная неопределенная. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали значения по умолчанию и именованный импорт

Но я выполнил экспорт во все свои файлы и не смешал их с какими-либо значениями по умолчанию или именованный импорт.

Индекс. js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './src/redux/reducers/rootReducer'
import { NavigationContainer } from '@react-navigation/native'

const store = createStore(rootReducer)

const Root = () => (
    <Provider store={store}>
        <NavigationContainer>
            <App />
        </NavigationContainer>
    </Provider>
)

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

Приложение. js

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';

import Accounts from './src/components/Accounts';
import Categories from './src/components/Categories';
import Transactions from './src/components/Transactions';
import Budget from './src/components/Budget';
import Overview from './src/components/Overview';

const Tab = createMaterialBottomTabNavigator();

export default App = () => {
  return (
    <Tab.Navigator
      initialRouteName="Accounts"
      activeColor="#e91e63"
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen
        name="Accounts"
        component={Accounts}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen ... />
<Tab.Screen ... />
    </Tab.Navigator>
  );
}

В чем заключается ошибка в моем кодировании? Я прошел предыдущие вопросы, но все решения по умолчанию меняются на именованные и наоборот.

Answer 1

Добавление экспорта по умолчанию решило мою проблему

Code :

//Import library to help create component
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';

//Create a Component
const App = () => (
  <Header />
);

//Export App - This line solved my issue
export default App;

//Render it to the device
AppRegistry.registerComponent('albums', () => App);
//albums is project name that we use while creating RN App