我想在 React Native 中将我的屏幕修改为抽屉

如何解决我想在 React Native 中将我的屏幕修改为抽屉

我想转换我下面的代码或想修改它，这样我就可以显示抽屉了，请我是新手反应 Native 帮助我。提前致谢。 我想从其他屏幕导航此抽屉

我写这个是因为我不能发布问题=我想转换我下面的代码或想修改它以便我可以显示抽屉，请我是新手来反应原生帮助我。提前致谢。 我想从其他屏幕导航此抽屉 我想转换我下面的代码或想修改它，以便我可以显示抽屉，请我是新来的响应 Native 帮助我。提前致谢。 我想从其他屏幕导航此抽屉 我想转换我下面的代码或想修改它，以便我可以显示抽屉，请我是新来的响应 Native 帮助我。提前致谢。 我想从其他屏幕导航此抽屉

这是我的代码

import React,{ Component } from "react";
import { Image,StyleSheet,ScrollView,TextInput,View } from "react-native";
import Slider from "react-native-slider";
import { AntDesign } from '@expo/vector-icons';
import { Foundation } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import {RoleLogin} from './Browse'
import Browse from './Browse'
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import { Divider,Button,Block,Text,Switch } from "../components";
import { theme,mocks } from "../constants";

class Settings extends Component {
  constructor(props){
    super(props);
    this.state = {
      profile: {},error: [],// data: [],roles: "",username:"",password:"",lading: false,title:"",data:"",};
  }
  
  componentDidMount() {
    this.setState({ profile: this.props.profile });
  }

  handleEdit(name,text) {
    const { profile } = this.state;
    profile[name] = text;

    this.setState({ profile });
  }

  toggleEdit(name) {
    const { editing } = this.state;
    this.setState({ editing: !editing ? name : null });
  }
  renderEdit(name) {
    const { profile,editing } = this.state;

    if (editing === name) {
      return (
        <TextInput
          defaultValue={profile[name]}
          onChangeText={text => this.handleEdit([name],text)}
        />
      );
    }

    return <Text bold>{profile[name]}</Text>;
  }

  render() {
    const { profile,editing,roles,username} = this.state;
    const { navigation } = this.props;
    const data = navigation.getParam('data');

    return (

      <Block> 

        <Block flex={false} row center space="between" style={styles.header}>
          <Text h1 bold>
            Settings
          </Text>
          <Button onPress={() => navigation.navigate("Browse")}>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button>
        </Block> 

         <ScrollView showsVerticalScrollIndicator={false}> 

          <Block style={styles.inputs}>

            <Block row space="between" margin={[10,0]} style={styles.inputRow}>
              <Block style={{ flexDirection:'row'}}>
                <Text gray2 style={{ marginBottom: 10 }}>
                </Text>
                <AntDesign name="user" size={24} color="black" />
                {this.renderEdit("username")}
              </Block>
              <Text
                medium
                secondary
                onPress={() => this.toggleEdit("username")}
              >
                {editing === "username" ? "Save" : "Edit"}
              </Text>
            </Block>
    
            <Divider margin={[theme.sizes.base,theme.sizes.base * 1]} />
            
            {data == "delectus aut autem" &&
            <Block row space="between" margin={[10,0]} style={styles.inputRow}>
              <Block style={{ flexDirection:'row'}}>
                <Text gray2 style={{ marginBottom: 10 }}></Text>
                <Foundation name="page-copy" size={24} color="black" />
                <Text bold style={{paddingHorizontal: 20 }}>Customer Report</Text>
              </Block>
            </Block>
            }      
            
          </Block>
        </ScrollView>
      </Block>
    );
  }
}
Settings.defaultProps = {
  profile: mocks.profile
};

export default Settings;

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: theme.sizes.base * 2
  },avatar: {
    height: theme.sizes.base * 1.2,width: theme.sizes.base * 2.2
  },inputs: {
    marginTop: theme.sizes.base * 0.7,paddingHorizontal: theme.sizes.base * 2
  },inputRow: {
    alignItems: "flex-end"
  },sliders: {
    marginTop: theme.sizes.base * 0.7,paddingHorizontal: theme.sizes.base * 2

  },thumb: {
    width: theme.sizes.base,height: theme.sizes.base,borderRadius: theme.sizes.base,borderColor: "white",borderWidth: 3,backgroundColor: theme.colors.secondary
  },toggles: {
    paddingHorizontal: theme.sizes.base * 2
  }
});