Как добавить или удалить элемент вкладки в нижней вкладке?

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 не отображаются нормально.

Кто-нибудь предлагает решить эту проблему?

Первый, спасибо за время.