时间戳

首页 > 解决方案 > 将 openDrawer() 添加到 React Native 中标题上的汉堡菜单 - 导致错误未定义

react-native - 将 openDrawer() 添加到 React Native 中标题上的汉堡菜单 - 导致错误未定义

问题描述

这是我的第一个 React Native 应用程序。我想让标题汉堡图标打开侧栏（抽屉），但它只读取为未定义。所以我读到它不可能在标题上实现 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>
    </>
  );
};

标签： react-nativeexporeact-navigation

解决方案

首先，navigation在您所在的App.js位置创建一个文件夹 在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",
  },
});

推荐阅读