无法在中间选项卡按钮和组件之间创建导航链接

Question

我使用react native来创建移动应用。我试图用React Navigation 4创建一个中间按钮。我的导航组件是：

import React, { Component } from 'react';

import Contact from '../Contact/Contact';
import ContactDetails from '../ContactDetails/ContactDetails';
import Home from '../Home/Home';
import Login from '../Login/Login';
import Mandate from '../Mandate/Mandate';
import MandateDetails from '../MandateDetails/MandateDetails';
import Share from '../Share/Share';
import Help from '../Help/Help';
import Settings from '../Settings/Settings'

import IconWithBadge from '../IconWithBadge/IconWithBadge';

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';

import { Icon } from 'react-native-elements'

// ###########################################################################################
// #                                                                                         #
// #                                                                                         #
// #                      OTHER SCREENS FOR NAVIGATION                                       #
// #                                                                                         #
// #                                                                                         #
// ###########################################################################################


// ###########################################################################################
// #                                                                                         #
// #                                                                                         #
// #                      TABS NAVIGATIONS FOR ENTIRE APP                                    #
// #                                                                                         #
// #                                                                                         #
// ###########################################################################################

const TabBarComponent = props => <BottomTabBar {...props} />;

const TabScreens = createBottomTabNavigator(
    {
        Accueil: {
            screen: Home,
            navigationOptions: () => ({
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="home"
                        type='font-awesome'
                        color='#f50'
                        color={tintColor}
                        size={24}
                    />
                ),
                tabBarOptions: {
                    showLabel: true, // hide show labels
                    activeTintColor: '#FFFFFF',
                    inactiveTintColor: '#474661'
                }
            })
        },
        // ############################################
        // ############################################
        Partages: {
            screen: Share,
            navigationOptions: () => ({
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="home"
                        type='font-awesome'
                        color='#f50'
                        color={tintColor}
                        size={24}
                    />
                ),
                tabBarOptions: {
                    showLabel: true, // hide show labels
                    activeTintColor: '#FFFFFF',
                    inactiveTintColor: '#474661'
                }
            })
        },
        // ############################################
        // ############################################
        Help: {
            screen: () => null, // Empty screen
            navigationOptions: () => ({
                tabBarIcon: <IconWithBadge />,
                tabBarLabel: () => null,
                tabBarOptions: {
                    showLabel: true, // hide show labels
                    activeTintColor: '#FFFFFF',
                    inactiveTintColor: '#474661'
                }
            })
        },
        // ############################################
        // ############################################
        Mandats: {
            screen: Mandate,
            navigationOptions: () => ({
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="home"
                        type='font-awesome'
                        color='#f50'
                        color={tintColor}
                        size={24}
                    />
                ),
                tabBarOptions: {
                    showLabel: true, // hide show labels
                }
            })
        },
        // ############################################
        // ############################################
        Contacts: {
            screen: Contact,
            navigationOptions: () => ({
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="home"
                        type='font-awesome'
                        color='#f50'
                        color={tintColor}
                        size={24}
                    />
                ),
                tabBarOptions: {
                    showLabel: true, // hide show labels
                }
            })
        }
        // ############################################
        // ############################################
    },
    {
        tabBarComponent: props => (
            <TabBarComponent {...props} style={{ borderTopColor: 'white', backgroundColor: '#037ffc' }} />
        ),
    }
)


// ###########################################################################################
// #                                                                                         #
// #                                                                                         #
// #                      DRAWER NAVIGATIONS FOR ENTIRE APP                                  #
// #                                                                                         #
// #                                                                                         #
// ###########################################################################################

const DrawerNavigator = createDrawerNavigator({
    Accueil: {
        screen: TabScreens
    },
    Aide: {
        screen: Help
    },
    Paramatres: {
        screen: Settings
    }
})


// ###########################################################################################
// #                                                                                         #
// #                                                                                         #
// #                      MAIN NAVIGATIONS FOR ENTIRE APP                                    #
// #                                                                                         #
// #                                                                                         #
// ###########################################################################################


const AppStack = createStackNavigator(
    {
        Accueil: DrawerNavigator
    },
    {

    }
)

const AuthStack = createStackNavigator(
    {
        Login: {
            screen: Login,
        }
    },
    {

    }
)

const AppNavigator = createSwitchNavigator(
    {
        App: AppStack,
        Auth: AuthStack
    },
    {

    }
)

export default createAppContainer(AppNavigator);

我尝试在IconWithBadge和Help组件之间创建堆栈或切换导航，以使当我单击中间选项卡按钮时可以进行导航。我的问题是，IconWithBadge组件中的导航道具未定义，因此我无法导航至其他屏幕。

Answer 1

希望它会有所帮助，请放心提出疑问