Question

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

在标签栏中有一个分配给菜单标签按钮的虚拟屏幕，我正在使用tabBarOnPress()拦截导航操作。该方法将打开抽屉，如果与菜单按钮的路径名称匹配，则返回该方法，否则它将导航。不论我分配给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

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

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

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

1 个答案: