将 openDrawer() 添加到 React Native 中 header 上的汉堡菜单 - 给出错误未定义

Question

这是我的第一个 React Native 应用程序。我想获得 header 汉堡包图标来打开侧边栏（抽屉），但它只将其读取为未定义。所以我读到不可能在 header 上实现 openDrawer() 因为它不被读取为“屏幕”。我无法理解如何更改我的代码以使其工作。帮助表示赞赏。

我的代码：

//Header
import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export const Header = ({ navigation, title }) => {
  const openMenu = () => {
    navigation.openDrawer();
  };

  return (
    <View style={styles.header}>
      <TouchableOpacity onPress={openMenu} style={styles.icons}>
        <Ionicons name="md-menu" size={28} color="white" />
      </TouchableOpacity>
      <View style={styles.headerTitle}>
        <Text style={styles.headerText}>{title}Title for header</Text>
      </View>
    </View>
  );
};

//Navigation screen

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";

import { Notifications } from "./screens/Notifications";
import { Profile } from "./screens/Profile";
import { Header } from "./screens/Header";

const Drawer = createDrawerNavigator();
export const Navigation = () => {
  return (
    <>
      <Header />
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Login" component={Login} />
          <Drawer.Screen name="Profile" component={Profile} />
          <Drawer.Screen name="Notifications" component={Notifications} />
        </Drawer.Navigator>
      </NavigationContainer>
    </>
  );
};

Answer 1

首先，在您的 App.js 所在的位置创建一个名为 navigation 的文件夹在 navigation 文件夹中创建一个名为 AppNavigator.js

的文件

然后把这个粘贴到里面AppNavigator.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import { Notifications } from "./screens/Notifications";
import { Profile } from "./screens/Profile";

const Drawer = createDrawerNavigator();

function AppNavigator() {
  return (
    <Drawer.Navigator screenOptions={{ headerShown: true }}>
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Notifications" component={Notifications} />
    </Drawer.Navigator>
  );
}

export default AppNavigator;

在您的 App.js 中粘贴此代码

import React from "react";

import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator"

const App = () => {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

你的 Login.js 看起来像这样

import React, { useState } from "react";
import {
  TouchableOpacity,
  TextInput,
  Text,
  View,
  StyleSheet,
} from "react-native";

export const Login = ({ navigation }) => {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>Welcome to your App</Text>
      <View style={styles.inputView}>
        <TextInput
          // required
          style={styles.inputText}
          placeholder="Email"
          placeholderTextColor="#fff"
          onChangeText={(value) => setUserName(value)}
          defaultValue={userName}
        />
      </View>
      <View style={styles.inputView}>
        <TextInput
          // required
          style={styles.inputText}
          placeholder="Password"
          placeholderTextColor="#fff"
          onChangeText={(value) => setPassword(value)}
          defaultValue={password}
        />
      </View>
      <TouchableOpacity>
        <Text style={styles.forgot}>Forgot Password?</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.loginButton}
        title="Login"
        onPress={() => navigation.navigate("NavigationTest", { userName })}
      >
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  welcomeText: {
    color: "#fb5b5a",
    fontWeight: "bold",
    fontSize: 50,
    textAlign: "center",
    margin: 40,
  },
  inputView: {
    width: "80%",
    backgroundColor: "#465880",
    borderRadius: 25,
    height: 50,
    marginBottom: 20,
    justifyContent: "center",
    padding: 20,
  },
  inputText: {
    height: 50,
    color: "white",
  },
  loginButton: {
    width: "80%",
    backgroundColor: "#fb5b5a",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    marginBottom: 10,
  },
  forgot: {
    color: "grey",
  },
  loginText: {
    color: "#ffff",
    fontWeight: "bold",
  },
});

将 openDrawer() 添加到 React Native 中 header 上的汉堡菜单 - 给出错误未定义

Add openDrawer() to hamburger menu on a header in React Native -gives error undefined

react-native

react-navigation

expo