создать навигатор не принимать аргумент

Question

Я пытаюсь создать проект Bottom Navigation в React Native. Но я получаю следующую ошибку:

Ошибка: создание навигатора не требует аргумента. Может быть, вы пытаетесь использовать React Navigation 4 API с React Navigation 5?

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

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

import Accounts from './src/components/Accounts';
.... importing other screens here... 

const Tab = createMaterialBottomTabNavigator(
  {
    Accounts: {
      screen: Accounts,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => {
          <Icon name={'ios-home'} size={25} style={[{ color: tintColor }]} />
        }
      }
    },
    Categories: { screen: Categories },
    Transactions: { screen: Transactions },
    Budget: { screen: Budget },
    Overview: { screen: Overview }
  },
  {
    initialRouteName: 'Accounts',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    barStyle: { backgroundColor: '#694fad' }
  }
);

export default createAppContainer(Tab)

Индекс. 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'


const store = createStore(rootReducer)

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

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

Я хочу навигацию снизу с 5 вкладками. В чем ошибка в моем кодировании?

Answer 1

в v5 создание навигаторов изменено, функция createMaterialBottomTabNavigator не имеет параметров, вам нужно использовать эту структуру

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}

      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

go здесь для более подробной информации https://reactnavigation.org/docs/en/tab-based-navigation.html