[英]React Native Navigation v5 triggering a drawer from bottom tabs
目前,我正在尝试从底部导航中拨动抽屉,如下所示:
我当前的标签如下:
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName;
switch (route.name) {
case 'Home':
iconName = 'window-maximize';
break;
case 'Purchases':
iconName = 'tags';
break;
case 'Notifications':
iconName = 'bell';
break;
case 'Checkout':
iconName = 'shopping-cart';
break;
case 'Orders':
iconName = 'dollar';
break;
case 'Menu':
iconName = 'navicon';
break;
}
return (
<Icon
name={iconName}
size={20}
color={focused ? 'blue' : 'grey'}
/>
);
},
})}
tabBarOptions={{
showLabel: false,
}}>
<Tab.Screen name="Home" component={LandingScreens} />
<Tab.Screen name="Purchases" component={PurchasesScreens} />
<Tab.Screen name="Notifications" component={Notifications} />
<Tab.Screen name="Checkout" component={CheckoutScreens} />
<Tab.Screen name="Orders" component={OrdersScreens} />
<Tab.Screen
name="Menu"
component={Drawer}
listeners={({ navigation }) => ({
tabPress: (e) => {
e.preventDefault();
},
})}
/>
</Tab.Navigator>
</NavigationContainer>
我的 Drawer 组件只是一个自定义的 Drawer 组件:
const Drawer = ({ navigation }) => {
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={LandingScreens} />
</Drawer.Navigator>
);
};
我的问题是这样的可能吗? 我试图跳跳虎从该navigation.openDrawer() tabPress
但找不到方法。 我这样做是对的,还是需要某种自定义的底部导航? 任何帮助深表感谢!
谢谢。
您可以使用DrawerActions.openDrawer
:
import { DrawerActions } from '@react-navigation/native'
<Tab.Screen
name="Menu"
component={Drawer}
listeners={({ navigation }) => ({
tabPress: (e) => {
e.preventDefault();
navigation.dispatch(DrawerActions.openDrawer())
},
})}
/>
更好的解决方案是将选项卡嵌套在抽屉内,以便navigation.openDrawer()
工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.