对react-navigation的选项卡导航器的特定选项卡按钮进行自定义导航操作 [英] Custom navigation operation on specific tab button of react-navigation's tab navigator

问题描述

我想从选项卡上的特定按钮打开抽屉(例如，选项菜单)，而不是导航至屏幕.我当前的解决方案正在使用react-navigation v2，但是当我们从v2升级到react-navigation的v3，并将react-native从v57升级到v60时，该解决方案已停止工作.

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.

在选项卡栏中有一个虚拟屏幕分配给菜单选项卡按钮，我正在使用tabBarOnPress()拦截导航操作.该方法将打开抽屉，如果与菜单按钮的路径名称匹配，则返回该方法，否则将进行导航.不论我为tabBarOnPress()分配了什么方法，该选项卡导航器似乎都在导航至虚拟屏幕，并且该方法也被调用.

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.

以下是当前的代码，该代码在v2上运行良好，但是在v3中已停止运行:

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
    }
);

推荐答案

您可以通过在navigationOptions上使用tabBarOnPress来将默认选项卡图标按处理程序更改为所需的任何内容:

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')
  }
},

这篇关于对react-navigation的选项卡导航器的特定选项卡按钮进行自定义导航操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！