为什么抽屉没有在 React Native 中打开

如何解决为什么抽屉没有在 React Native 中打开

我是本机反应的新手。我创建了 browse.js 文件在同一个文件中，我在文件末尾创建了我的抽屉函数。但我的抽屉打不开。请帮忙，谢谢..

这是我的 browse.js 文件

import React,{ Component } from "react";
import {
  Dimensions,Image,StyleSheet,ScrollView,TouchableOpacity,View,} from "react-native";
import { ThemeColors } from "react-navigation";
import { Card,Badge,Button,Block,Text } from "../components";
import { theme,mocks } from "../constants";
import Settings from "./Settings";
import { NotificationsScreen } from "./Settings";
const { width } = Dimensions.get("window");
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import Drawer1 from "./Settings";
import Home from "./Settings";

class browse extends Component {
  state = {
    // active: "Products",// active: "Select_Acivity",categories: [],error: [],// data: [],roles: "",username: "",password: "",lading: false,title: "",data: "",};

  //++++++++++++++++++++++++++++++Drawer fun start++++++++++++++++++++++++++++++++++

  //++++++++++++++++++++++++++++++Drawer fun close++++++++++++++++++++++++++++++++++

  //*******************navagte to setting when data fetch start*************************/

  RoleLogin() {
    //  const { data } = this.state;
    // const { username,password,roles } = this.state;
    fetch(
      "https://jsonplaceholder.typicode.com/todos/1",//fetch(
      // "https://nasdigital.tech/Android_API_CI/validate_login_details",{
        method: "GET",headers: { "Content-Type": "application/json" },// body: JSON.stringify([{ data}]),}
    )
      .then((response) => response.json())

      .then((json) => {
        //login to check details from server and then display or navigate to another screen
        if (json != "error") {
          // if (response && response.length && response[0].message != "error")
          alert(JSON.stringify(json));
          this.props.navigation.navigate("Settings",{
            data: json.title,});
          // .navigate("Settings",{ data: json.title });
          // this.props.navigation.navigate("Settings",{data : json.title});
        } else {
          alert("Cehck Details");
        }
      })

      .catch((error) => alert("Cehck Details"));
  }
  //*******************navagte to setting when data fetch close**************************** */

  componentDidMount() {
    this.setState({ categories: this.props.categories });
  }

  // handleTab = tab => {
  //   const { categories } = this.props;
  //   const filtered = categories.filter(category =>
  //     category.tags.includes(tab.toLowerCase())
  //   );

  //   this.setState({ active: tab,categories: filtered });
  // };

  renderTab(tab) {
    const { active } = this.state;
    const isActive = active === tab;

    return (
      <TouchableOpacity
        key={`tab-${tab}`}
        onPress={() => this.handleTab(tab)}
        style={[styles.tab,isActive ? styles.active : null]}
      >
        <Text size={16} medium gray={!isActive} secondary={isActive}>
          {tab}
        </Text>
      </TouchableOpacity>
    );
  }

  render() {
    const { profile,navigation } = this.props;
    const { categories } = this.state;
    // // const tabs = ["Products","Inspirations","Shop"];
    // const tabs = ["Select_Activity","Market_Visit"];
    // const tabs = ["Select_Activity"];
    const tabs = [""];
    return (
      <Block>
        <Block flex={false} row center space="between" style={styles.header}>
          <Text h1 bold>
            Select Activity
          </Text>
          <Button onPress={() => this.RoleLogin()}>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button>
          {/* <Button onPress={() => navigation.navigate("Settings")}>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button> */}
        </Block>

        <Block flex={false} row style={styles.tabs}>
          {tabs.map((tab) => this.renderTab(tab))}
        </Block>

        <ScrollView
          showsverticalScrollIndicator={false}
          style={{ paddingVertical: theme.sizes.base * 2 }}
        >
          <Block flex={false} row space="between" style={styles.categories}>
            {categories.map((category) => (
              <TouchableOpacity
                key={category.name}
                onPress={() => navigation.navigate("MarketVisit",{ category })}
              >
                <Card center middle shadow style={styles.category}>
                  <Badge
                    margin={[0,15]}
                    size={90}
                    color="rgb(255,163,102)"
                  >
                    <Image source={category.image} />
                  </Badge>
                  <Text medium height={20}>
                    {category.name}
                  </Text>
                  <Text gray caption>
                    {category.count}
                  </Text>
                </Card>
              </TouchableOpacity>
            ))}
          </Block>
        </ScrollView>
      </Block>
    );
  }
}

//+++++++++++++++++++++++++++++++++++++++++

//++++++++++++++++++++++++++++++++++++++

browse.defaultProps = {
  profile: mocks.profile,categories: mocks.categories,};

//export default browse;
exports.browse = browse;

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: theme.sizes.base * 2,},avatar: {
    height: theme.sizes.base * 1.0,width: theme.sizes.base * 1.5,tabs: {
    borderBottomColor: theme.colors.gray2,borderBottomWidth: StyleSheet.hairlinewidth,marginVertical: theme.sizes.base,marginHorizontal: theme.sizes.base * 2,tab: {
    marginRight: theme.sizes.base * 7,paddingBottom: theme.sizes.base,active: {
    borderBottomColor: theme.colors.secondary,borderBottomWidth: 3,categories: {
    flexWrap: "wrap",paddingHorizontal: theme.sizes.base * 1.5,marginBottom: theme.sizes.base * 2,category: {
    // this should be dynamic based on screen width
    minWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,maxWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,maxHeight: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,});

const Drawer = createDrawerNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="browse" openByDefault>
        <Drawer.Screen name="browse" component={browse} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}