Javascript 如何打开抽屉中的模式头灯图标按钮？

我是一个新来的本地人，在一个虚拟项目上工作。我使用react导航设置标题和headerRight，并在标题右侧放置一个图标。现在我想打开一个模式，每当用户点击图标，它会显示一个模式。我尝试了很多事情，但没有找到合适的解决办法。现在我被卡住了，把这个问题贴出来。我把我的代码放在下面。 这是我的密码：

//Navigation of my app
import * as React from "react";
import { View, TouchableOpacity, StyleSheet } from "react-native";
import { AntDesign, Fontisto } from "@expo/vector-icons";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createStackNavigator } from "@react-navigation/stack";
import AccountsScreen from "../screens/AccountsScreen";
import FavouritesScreen from "../screens/FavouritesScreen";
import HomeScreen from "../screens/HomeScreen";
import SettingsScreen from "../screens/SettingsScreen";
import TrendsScreen from "../screens/TrendsScreen";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { Dimensions } from "react-native";
import Income from "../screens/Income";
import Expense from "../screens/Expense";
import FundTransferModal from "../components/Accounts/FundTransferModal";

const AppStack = () => {
  return(
    <Stack.Navigator mode="modal" headerMode="none">
     <Stack.Screen name="Modal" component={FundTransferModal} />
    </Stack.Navigator>
  )
}

const AppDrawer = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: true,
      }}
    >
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight: () => {
            return (
              <TouchableOpacity onPress={() => AppStack() }>
              <View style={styles.icons}>
                <AntDesign name="piechart" size={30} color="#29416F" />
              </View>
              </TouchableOpacity>
            );
          },
        }}
      />
      <Drawer.Screen name="Accounts" component={AccountsScreen} options={{
          headerRight: () => {
            return (
              <TouchableOpacity>
              <View style={styles.icons}>
                <Fontisto name="arrow-swap" size={24} color="#29416F" onPress={() =>{return <FundTransferModal />}} />
              </View>
              </TouchableOpacity>
            );
          },
        }} />
      <Drawer.Screen name="Categories" component={CategoriesTabScreens} />
      <Drawer.Screen name="Trends" component={TrendsScreen} />
      <Drawer.Screen name="Favourites" component={FavouritesScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
};

export default AppDrawer;

const styles = StyleSheet.create({
  icons:{
    
    marginRight:20,
  }
})

//The Modal which i want to open
import React, { Fragment, useState } from "react";
import { globalStyles } from "../../style/Global";
import { AntDesign, Entypo } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Formik } from "formik";
import * as yup from "yup";
import { Picker } from "@react-native-picker/picker";
import SubmitButton from "../SubmitButton";
import { ExampleUncontrolledVertical } from "../../assets/ExampleUncontrolledVertical";
import {
  Modal,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  Button,
  Keyboard,
  ScrollView,
} from "react-native";
import DatePiker from "../DatePikers";

export default function FundTransferModal({navigation}) {
  const [fundModal, setFundModal] = useState(true);
  const [selectedValue, setValue] = useState(0);
  showFundModal = () => {
    setFundModal(true);
  };
  closeFundModal = () => {
    setFundModal(false);
  };
  const validations = yup.object({
    text: yup.string().required().min(3),
  });
  const values = ["Cash", "Bank", "Other"];
  const valuesTwo = ["Cash", "Bank", "Other"]
  const initialValues = { value: "", valueTwo: "" };
  return (
    <Modal visible={fundModal} animationType="fade">
      <View style={globalStyles.modalHeader}>
        <AntDesign
          name="arrowleft"
          size={30}
          onPress={() => closeFundModal()}
        />
        <Text style={styles.headerText}>Transfer</Text>
      </View>
      <Formik
        validationSchema={validations}
        initialValues={{ amount: "" , notes:"" }}
        onSubmit={(values, actions) => {
          actions.resetForm();
          console.log(values);
        }}
      >
        {(props) => (
          <Fragment>
            <ScrollView>
            <View style={styles.container}>
              <View style={styles.box}>
                <View style={styles.picker}>
                  <Picker
                    mode="dropdown"
                    selectedValue={props.values.value}
                    onValueChange={(itemValue) => {
                      props.setFieldValue("value", itemValue);
                      setValue(itemValue);
                    }}
                  >
                    <Picker.Item
                      label="Account"
                      value={initialValues.value}
                      key={0}
                      color="#afb8bb"
                    />
                    {values.map((value, index) => (
                      <Picker.Item label={value} value={value} key={index} />
                    ))}
                  </Picker>
                </View>
                <View style={styles.inputValue}>
                  <TextInput
                    style={styles.inputName}
                    placeholder="Value"
                    keyboardType="numeric"
                    onChangeText={props.handleChange("amount")}
                    value={props.values.amount}
                    onBlur={props.handleBlur("amount")}
                  />
                </View>
              </View>
              <View style={styles.doubleArrow}>
              <Entypo name="arrow-long-down" size={40} color="#afb8bb" />
              <Entypo name="arrow-long-down" size={40} color="#afb8bb" />
              </View>
              <View style={styles.box}>
              <View style={styles.picker}>
                  <Picker
                    mode="dropdown"
                    selectedValue={props.values.valueTwo}
                    onValueChange={(itemValue) => {
                      props.setFieldValue("valueTwo", itemValue);
                      setValue(itemValue);
                    }}
                  >
                    <Picker.Item
                      label="Account"
                      value={initialValues.valueTwo}
                      key={0}
                      color="#afb8bb"
                    />
                    {valuesTwo.map((value, index) => (
                      <Picker.Item label={value} value={value} key={index} />
                    ))}
                  </Picker>
                </View>
             <View style={styles.Calendar}><DatePiker  /></View>   
             <View style={styles.inputValue}>
                  <TextInput
                    style={styles.inputName}
                    placeholder="Notes"
                    multiline= {true}
                    onChangeText={props.handleChange("notes")}
                    value={props.values.notes}
                    onBlur={props.handleBlur("notes")}
                  />
                </View>
              </View>
              <SubmitButton title="Save" onPress={props.handleSubmit} />
            </View>
            </ScrollView>
          </Fragment>
        )}
      </Formik>
    </Modal>
  );
}

const styles = StyleSheet.create({
  headerText: {
    fontSize: 20,
    marginLeft: 5,
  },
  container: {
    flex: 1,
  },
  box: {
    
    borderColor: "#afb8bb",
    margin: 20,
    flexDirection: "column",
    borderWidth: 1,
    borderStyle: "dashed",
    borderRadius:5,
    marginTop:40,
  },

  inputName:{
    padding:10,
    borderWidth:1,
    borderColor:"#afb8bb",
  },
  inputValue:{
    margin:10,
    marginHorizontal:20,
  },
  picker:{
    borderWidth:1,
    borderColor:"#afb8bb",
    margin:10,
    marginHorizontal:20,
  },
  doubleArrow:{
    flexDirection:'row',
    alignContent:'center',
    justifyContent:'center',
    marginTop:10
  },
  Calendar: {
    marginTop:-20,
    borderColor: "#afb8bb",
    
    
    paddingVertical: 10,
    marginHorizontal:20,
    fontSize: 20,
    textAlign: 'center',
    color: 'black',
    
  }
});

//我的应用程序导航
从“React”导入*作为React；
从“react native”导入{View，TouchableOpacity，StyleSheet}；
从“@expo/vector icons”导入{AntDesign，Fontisto}”；
从“@react navigation/drawer”导入{createDrawerNavigator}；
从“@react navigation/stack”导入{createStackNavigator}；
从“./屏幕/AccountsScreen”导入AccountsScreen；
从“./screens/favoritesscreen”导入收藏夹屏幕；
从“./屏幕/主屏幕”导入主屏幕；
从“./屏幕/设置屏幕”导入设置屏幕；
从“./screens/TrendsScreen”导入趋势屏幕；
从“@react navigation/material top tabs”导入{createMaterialTopTabNavigator}”；
从“react native”导入{Dimensions}；
来自“./屏幕/收入”的进口收入；
从“./屏幕/费用”导入费用；
从“./components/Accounts/FundTransferModal”导入FundTransferModal；
常量AppStack=（）=>{
返回(
)
}
常量AppDrawer=（）=>{
返回(
{
返回(
AppStack（）}>
);
},
}}
/>
{
返回(
{return}}/>
);
},
}} />
);
};
导出默认AppDrawer；
const styles=StyleSheet.create({
图标：{
marginRight:20，
}
})
//我要打开的模式
从“React”导入React，{Fragment，useState}；
从“./../style/Global”导入{globalStyles}”；
从“@expo/vector icons”导入{AntDesign，Entypo}”；
从“@expo/vector icons”导入{MaterialCommunityIcons}”；
从“Formik”导入{Formik}；
从“yup”导入*作为yup；
从“@react native Picker/Picker”导入{Picker}”；
从“./SubmitButton”导入SubmitButton；
从“../../assets/ExampleUncontrolledVertical”导入{ExampleUncontrolledVertical}”；
进口{
情态动词
样式表，
文本，
文本输入，
可触摸不透明度，
看法
按钮
键盘
滚动视图，
}从“反应本族语”；
从“./DatePikers”导入DatePiker；
导出默认函数FundTransferModal（{navigation}）{
const[fundModal，setFundModal]=useState（true）；
常量[selectedValue，setValue]=useState（0）；
showFundModal=（）=>{
setFundModal（真）；
};
closeFundModal=（）=>{
setFundModal（假）；
};
const validations=yup.object({
text:yup.string（）.required（）.min（3），
});
常量值=[“现金”、“银行”、“其他”]；
常量值wo=[“现金”、“银行”、“其他”]
const initialValues={value:，valueTwo:}；
返回(
closeFundModal（）}
/>
转移
{
actions.resetForm（）；
console.log（值）；
}}
>
{（道具）=>(
{
props.setFieldValue（“值”，itemValue）；
设置值（itemValue）；
}}
>
{values.map（（值，索引）=>(
))}
{
props.setFieldValue（“valueTwo”，itemValue）；
设置值（itemValue）；
}}
>
{valuesTwo.map（（值，索引）=>(
))}
)}
);
}
const styles=StyleSheet.create({
标题文字：{
尺寸：20，
边缘左：5，
},
容器：{
弹性：1，
},
方框：{
边框颜色：“afb8bb”，
差额：20，
flexDirection:“列”，
边框宽度：1，
边框样式：“虚线”，
边界半径：5，
玛金托普：40，
},
输入名称：{
填充：10，
边框宽度：1，
边框颜色：“afb8bb”，
},
输入值：{
差额：10，
marginHorizontal:20，
},
选择器：{
边框宽度：1，
边框颜色：“afb8bb”，
差额：10，
marginHorizontal:20，
},
双箭头：{
flexDirection:“行”，
对齐内容：'中心'，
辩护内容：'中心'，
玛金托普：10
},
日历：{
马金托普：20岁，
边框颜色：“afb8bb”，
填充垂直：10，
marginHorizontal:20，
尺寸：20，
textAlign:'中心'，
颜色：'黑色'，
}
});

您解决了这个问题吗？您解决了这个问题吗？