Блог

Я новичок в react native и работаю над фиктивным проектом. Я использую react-navigation для установки заголовка и заголовка и размещения значка в правой части заголовка. Теперь я хочу открывать модальный файл всякий раз, когда пользователь нажимает на значок, он показывает модальный. Я много чего перепробовал, но не нашел подходящего решения. Теперь я застрял и отправил этот вопрос. Я размещаю свой код ниже. Вот мой код:

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