react-navigation 的选项卡导航器的特定选项卡按钮上的自定义导航操作

Question

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

标签栏中的菜单标签按钮分配了一个虚拟屏幕，我正在使用 tabBarOnPress() 拦截导航操作。该方法打开抽屉和 returns 如果它与菜单按钮的路由名称匹配，否则它会导航。似乎选项卡导航器正在导航到虚拟屏幕，无论我分配给 tabBarOnPress() 的方法是什么，并且也调用了该方法。

以下是在 v2 中运行良好但在 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
    }
);

Answer 1

您可以使用 navigationOptions 上的 tabBarOnPress 将默认选项卡图标按下处理程序更改为您想要的任何内容：

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

react-navigation 的选项卡导航器的特定选项卡按钮上的自定义导航操作

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

react-native

react-navigation

react-native-tabnavigator

react-navigation-drawer