我想从选项卡上的特定按钮打开抽屉(例如选项菜单),而不是导航到屏幕。我目前的解决方案是在 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
}
);