Custom navigation operation on specific tab button of react-navigation's tab navigator

问题

I wanna open drawer (for example, options menu) from specific button on tab instead of navigating to screen. My current solution was working on react-navigation v2 but as we upgraded from v2 to v3 of react-navigation and v60 of react-native from v57, the solution has stopped working.

There is a dummy screen assigned to the menu tab button in tab bar and I am intercepting the navigation operation using tabBarOnPress(). The method opens drawer and returns if it matches the menu button's route name else it navigates. It seems that the tab navigator is navigating to the dummy screen regardless whatever method I assign to tabBarOnPress() and the method is called as well.

Following is the current code which was working fine v2 but has stopped working in v3:

class SlideMenuScreen extends Component {

    render() {
        return null;
    }
}


const tab = createBottomTabNavigator({
    Products: {
        screen: AppStack,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <SimpleLineIcons name='home' size={20} color={tintColor} />
            )
        }
    },
    Cart: {
        screen: CartScreen,
        navigationOptions: {
            tabBarLabel: 'Cart',
            tabBarIcon: ({ tintColor }) => (
                <EvilIcons
                    reverse
                    name='cart'
                    type='font-awesome'
                    color={tintColor}
                    size={30}
                />
            )
        }
    },
    SignIn: {
        screen: AuthStack,
        navigationOptions: {
            tabBarLabel: 'Sign in',
            tabBarIcon: ({ tintColor }) => (
                <SimpleLineIcons
                    name='login'
                    color={tintColor}
                    size={20}
                />
            )
        }
    },
    SideMenu: {
        screen: SlideMenuScreen,
        navigationOptions: (props) => ({
            tabBarLabel: 'Menu',
            tabBarIcon:
                <Entypo
                    name='menu'
                    color={props.tintColor}
                    size={20}
                />
        })
    }
},
    {
        initialRouteName: 'Products',
        swipeEnabled: true,
        tabBarOptions: {
            showLabel: false,
            showIcon: true,
            activeTintColor: config.themeBackgroundColor,
            inactiveTintColor: 'grey',
        },
    }
);


tab.navigationOptions = ({ navigation }) => {

    const { routeName } = navigation.state.routes[navigation.state.index];
    if (routeName === 'SideMenu') {
        navigation.openDrawer();
        return;
    }
    navigation.navigate(routeName);
};


const sideMenu = createDrawerNavigator({
    Home: tab
}, {
        initialRouteName: 'Home',
        drawerPosition: 'right',
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
        drawerWidth: 250,
        contentComponent: signedOutDrawerContent
    }
);

回答1:

You can change default tab icon press handler to anything you want by using tabBarOnPress on navigationOptions :

 Search: {
  screen: SearchStack,
  navigationOptions: {
    tabBarIcon: ({ tintColor }) => <Icon name='search' color={tintColor} size={25} />,
    tabBarOnPress: () => alert('hello')
  }
},

来源：https://stackoverflow.com/questions/57278516/custom-navigation-operation-on-specific-tab-button-of-react-navigations-tab-nav