如何在底部标签中添加或删除标签项目？

Question

我对react-navigation v3有疑问。我想添加新组件（选项卡项）或删除当前选项卡栏中的现有选项卡项。

我有：

export const MainTabContainer = createBottomTabNavigator(
    {
        Genre: {
            screen: GenreScreen
        },
        History: {
            screen: HistoryScreen
        }
    },
    {
        initialRouteName: 'Genre',
        backBehavior: true,
        lazy: true,
        tabBarOptions: {
            activeTintColor: '#454545',
            activeBackgroundColor: 'white',
            inactiveTintColor: '#ccc',
            inactiveBackgroundColor: 'white'
        }
    }
);

const defaultTabGetStateForAction = MainTabContainer.router.getStateForAction;
const defaultTabGetComponentForRouteName = MainTabContainer.router.getComponentForRouteName;

MainTabContainer.router.getStateForAction = (action, state) => {

    if (!state || !action || !action.name) {
        return defaultTabGetStateForAction(action, state);
    }

    if (action.name === 'addTab') {
        const routes = [
            ...state.routes,
            {key: action.key, routeName: action.routerName, params: action.data}
        ];
        return {
            ...state,
            routes,
            index: routes.length - 1,
        };
    }

    return defaultTabGetStateForAction(action, state);
};

MainTabContainer.router.getComponentForRouteName = (routeName) => {

    if (routeName === 'Recent') return RecentScreen;
    else if (routeName === 'About') return AboutScreen;


    return defaultTabGetComponentForRouteName(routeName);
};

export const Home = createDrawerNavigator(
    {
        Main: MainTabContainer
    },
    {
        drawerPosition: 'left',
        useNativeAnimations: true,
        drawerType: 'front',
        contentComponent: MenuDrawer
    }
);

const RootStack = createStackNavigator(
    {
        SplashScreen: SplashScreen,
        Home: Home,
        DetailScreen: DetailScreen
    },
    {
        initialRouteName: 'SplashScreen',
        mode: 'modal',
        headerMode: 'none',
        header: null,
        transparentCard: true,
        cardStyle: {
            shadowColor: 'transparent',
            backgroundColor:"transparent",
            opacity: 1
        }
    }
);

export const AppContainer = createAppContainer(RootStack);

这种方式将返回错误，找不到routerName GenreScreen或AboutScreen。

用户完成某项操作后，我想添加GenreScreen或AboutScreen或从中删除其中之一。 GenreScreen和AboutScreen无法正常显示。

有什么建议解决这个问题吗？

首先，感谢您的时间。