创建导航器不带参数

Question

我正在尝试在 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>
    );
}

去这里了解更多详情https://reactnavigation.org/docs/en/tab-based-navigation.html