如何将抽屉添加到 React Native 中的现有屏幕

问题描述

我是 React Native 的新手，我已经创建了 browse.js 屏幕，现在我想从正确的位置在那个屏幕中显示抽屉。但我不知道如何创建那个抽屉。如果您知道，请在下方输入抽屉代码并告诉我，我应该在 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,App } from "./Settings";
const { width } = Dimensions.get("window");
const Drawer = createDrawerNavigator();
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() {
  //   return <Settings />;
  // }

  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;

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,});

解决方法

此链接非常清楚，可以回答您的问题https://reactnavigation.org/docs/drawer-based-navigation/

例如用 Drawer 包裹你的屏幕：

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Browse">
        <Drawer.Screen name="Home" component={Browse} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}