[英]how to open a side menu on a click of an icon in react native
I am trying to create a functionality where the user can open a side menu on the click of an icon.我正在尝试创建一个功能,用户可以通过单击图标打开侧面菜单。
I just started using react native
and i am kind of confused since i been using react
for about a year now using hooks我刚开始使用react native
,我有点困惑,因为我使用钩子已经使用react
大约一年了
here is my current codes这是我当前的代码
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FeatherIcon from "react-native-vector-icons/Feather";
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '@react-navigation/drawer';
function HomeScreen() {
return (
<View style={{ ... }}>
<View style={{ ... }}>
<View style={{ ... }}>
<FeatherIcon size={30} name="menu"/> # ICON THAT USER MUSER CLICK TO OPEN A SIDE MENU
</View>
</View>
</View>
);
}
function ExploreScreen() {
return (
<View style={{ ... }}>
<Text>Explore!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{tabBarIcon: () => <FeatherIcon size={25} name="home"/>}}
/>
<Tab.Screen
name="Explore"
component={ExploreScreen}
options={{tabBarIcon: () => <FeatherIcon size={25} name="search"/>}}
/>
I tried to approach it this way我试图以这种方式接近它
function HomeScreen({navigation}) {
<View style={{ ... }}>
<Button title="test button" onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
<FeatherIcon size={30} name="menu"/>
</Button>
</View>
and first i cannot see the icon anymore and second when i click on test button
i receive the error首先,我再也看不到图标了,其次,当我单击test button
时,我收到了错误
undefined is not an object (evaluating 'navigation.navigate') - openDrawer
It would really help me if someone could show me how to make it properly.如果有人能告诉我如何正确地制作它,那真的会对我有所帮助。
Thank you谢谢
I see you are importing multiple things from @react-navigation/drawer
, but where are you using them?我看到您正在从@react-navigation/drawer
导入多个东西,但是您在哪里使用它们? It doesn't look like you are using createDrawerNavigator
to create your DrawerNavigator
.您似乎没有使用createDrawerNavigator
来创建DrawerNavigator
。 Here is a link to react-navigation's docs giving an example of a drawer navigator. 这是 react-navigation 文档的链接,提供了抽屉导航器的示例。 Try refactoring your TabNavigator above into a functional component, and then make that refactored 'TabNavigationStack' be the default screen for your drawer navigator.尝试将上面的 TabNavigator 重构为功能组件,然后将重构后的“TabNavigationStack”设为抽屉导航器的默认屏幕。
const TabNavigationStack = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ tabBarIcon: () => <FeatherIcon size={25} name="home" /> }}
/>
<Tab.Screen
name="Explore"
component={ExploreScreen}
options={{ tabBarIcon: () => <FeatherIcon size={25} name="search" /> }}
/>
</Tab.Navigator>
);
};
Then, make the Drawer.Navigator
the child component for the NavigationContainer
.然后,将Drawer.Navigator
NavigationContainer
子组件。 I believe you're receiving the error undefined is not an object (evaluating 'navigation.navigate') - openDrawer
because the drawer navigator was never created.我相信您收到错误undefined is not an object (evaluating 'navigation.navigate') - openDrawer
因为从未创建过抽屉导航器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.