如何在本机反应中单击图标打开侧边菜单答案

【问题标题】：how to open a side menu on a click of an icon in react native如何在本机反应中单击图标打开侧边菜单
【发布时间】：2021-02-25 19:41:29
【问题描述】：

我正在尝试创建一个功能，用户可以通过单击图标打开侧边菜单。

我刚开始使用react native，我有点困惑，因为我使用react 大约一年了，现在使用hooks

这是我当前的代码

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"/>}}
        />

我试着用这种方式接近它

 function HomeScreen({navigation}) {
 
 <View style={{ ... }}>
      <Button title="test button" onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <FeatherIcon size={30} name="menu"/>
      </Button>
 </View>

首先我看不到图标，其次当我点击test button 我收到错误

undefined is not an object (evaluating 'navigation.navigate') - openDrawer

如果有人能告诉我如何正确地制作它，那真的会对我有所帮助。

谢谢

【问题讨论】：

标签： javascript android ios reactjs react-native

【解决方案1】：

我看到你正在从@react-navigation/drawer 导入多个东西，但是你在哪里使用它们？您似乎没有使用createDrawerNavigator 创建您的DrawerNavigator。 Here 是 react-navigation 文档的链接，提供了抽屉导航器的示例。尝试将上面的 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>
  );
};

然后，将Drawer.Navigator 设为NavigationContainer 的子组件。我相信您会收到错误 undefined is not an object (evaluating 'navigation.navigate') - openDrawer，因为从未创建过抽屉导航器。

【讨论】：