在创建底部导航时响应本机错误



我正在尝试在反应本机项目中创建底部导航。我收到此错误

不变冲突:元素类型无效:预期的字符串(对于内置组件(或类/函数(对于复合组件(,但未定义。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入

但我确实导出到我的所有文件,并且我没有混合任何默认或命名的导入。

索引.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>
);
}

我的编码错误是什么?我已经经历了之前的问题,但所有解决方案都默认更改为命名,反之亦然。

添加导出默认值解决了我的问题

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

最新更新