如何在下拉列表中添加类别屏幕

Question

我是新手，我想在收入和支出这两个类别屏幕中添加新的子类别，并且我在每个屏幕中为子类别显示一个平面列表。我对两个屏幕都有相同的模式。现在我想在两个屏幕的相同模式中添加新的子类别。为此，我将 Formik 与 Picker 一起使用，但我陷入了创建新子类别的困境 这是我的代码，我也附上了输出。

Income Category Screen
import React, { useState } from "react";
import { View, FlatList } from "react-native";
import CatList from "../components/CatList";
import AddCategoryModal from "../components/AddCategoryModal";
import { FontAwesome } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { globalStyles } from "../style/Global";
import AddButton from "../components/AddButton";

const depositIcon = <FontAwesome name="bank" size={20} color="#afb8bb" />;
const savingIcon = (
  <FontAwesome5 name="dollar-sign" size={20} color="#afb8bb" />
);
const salaryIcon = <FontAwesome name="money" size={20} color="#afb8bb" />;

export default function Income() {
  const [addCatModal, setAddCatModal] = useState(false);
  const showCatModal = () => {
    setAddCatModal(true);
  };
  const closeCatModal = () => {
    setAddCatModal(false);
  };

  const [income, setIncome] = useState([
    { text: "Deposits", key: "1", icon: depositIcon },
    { text: "Saving", key: "2", icon: savingIcon },
    { text: "Salary", key: "3", icon: salaryIcon },
  ]);
  return (
    <View style={globalStyles.container}>
      <View style={globalStyles.seperator}></View>
      <View style={globalStyles.list}>
        <FlatList
          data={income}
          renderItem={({ item }) => <CatList item={item} />}
        />
      </View>
      <AddCategoryModal
        addCatModal={addCatModal}
        closeCatModal={closeCatModal}
      />
      <AddButton showCatModal={showCatModal} />
    </View>
  );
}


Expense Category Screen
import React, { useState } from "react";
import { View, FlatList,StyleSheet } from "react-native";
import CatList from "../components/CatList";
import { FontAwesome } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { globalStyles } from "../style/Global";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AddButton from "../components/AddButton";
import AddCategoryModal from "../components/AddCategoryModal";


const tour = <FontAwesome name="money" size={20} color="#afb8bb" />;
const taxi = <MaterialIcons name="local-taxi" size={20} color="#afb8bb" />;
const sports = <FontAwesome5 name="dumbbell" size={20} color="#afb8bb" />;
const pets = <MaterialIcons name="pets" size={20} color="#afb8bb"  />;
const home = <FontAwesome5 name="home" size={20} color="#afb8bb"  />;
const health = <FontAwesome name="heartbeat" size={20} color="#afb8bb"  />;
const gifts = <FontAwesome5 name="gifts" size={20} color="#afb8bb" />;
const food = <MaterialCommunityIcons name="food" size={20} color="#afb8bb"  />;
const entertainment = <FontAwesome5 name="question" size={20} color="#afb8bb"  />;
const eating = (
  <MaterialCommunityIcons name="food-fork-drink" size={20} color="#afb8bb"  />
);
const communication = <FontAwesome name="phone" size={20} color="#afb8bb"  />;
const car = <FontAwesome name="car" size={20} color="#afb8bb"  />;
const bill = <FontAwesome name="tag" size={20} color="#afb8bb"  />;

export default function Expense() {
  const [expense, setExpense] = useState([
    { text: "Tour", key: "1", icon: tour },
    { text: "Taxi", key: "2", icon: taxi },
    { text: "Sports", key: "3", icon: sports },
    { text: "Pets", key: "4", icon: pets },
    { text: "Home", key: "5", icon: home },
    { text: "Health", key: "6", icon: health },
    { text: "Gifts", key: "7", icon: gifts },
    { text: "Food", key: "8", icon: food },
    { text: "Entertainment", key: "9", icon: entertainment },
    { text: "Eating Out", key: "10", icon: eating },
    { text: "Communications", key: "11", icon: communication },
    { text: "Car", key: "12", icon: car },
    { text: "Bills", key: "13s", icon: bill },
  ]);

  const [addCatModal, setAddCatModal] = useState(false);
  const showCatModal = () => {
    setAddCatModal(true);
  };
  const closeCatModal = () => {
    setAddCatModal(false);
  };
  const addExpense = (expense) => {
    expense.key = Math.random.toString();
    setExpense((currentExpenses) => {
      return [expense, ...currentExpenses];
    });
    setAddCatModal(false);
  };
  return (
    <View style={globalStyles.container}>
      <View style={globalStyles.seperator}></View>
      <View style={globalStyles.list}>
      <AddCategoryModal
        addCatModal={addCatModal}
        closeCatModal={closeCatModal}
        addExpense={addExpense}
      />
        <FlatList
          data={expense}
          renderItem={({ item }) => <CatList item={item} />}
        />
      </View>
      
      <AddButton showCatModal={showCatModal} />
    </View>
  );
}

Category Modal

import React, { Fragment, useState } from "react";
import { FontAwesome, AntDesign } from "@expo/vector-icons";
import { Formik } from "formik";
import * as yup from "yup";
import {
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  TextInput,
  TouchableWithoutFeedback,
  Keyboard,
} from "react-native";
import SubmitButton from "./SubmitButton";
import { Picker } from "@react-native-picker/picker";
import { globalStyles } from "../style/Global";
export default function AddCategoryModal({ addCatModal, closeCatModal,addExpense }) {
  const [selectedValue, setValue] = useState(0);
  const values = ["Income", "Expense"];
  const initialValues = {value: "" };
  const validations = yup.object({
    text: yup.string().required().min(1),
  });
  return (
    
    <Modal visible={addCatModal}>
      
      <View style={globalStyles.modalHeader}>
        <AntDesign name="arrowleft" size={30} onPress={() => closeCatModal()} />
        <Text style={styles.headerText}>New Category</Text>
      </View>
      <Formik
        validationSchema={validations}
        initialValues={{text:"" }}
        onSubmit={(values) => {
          addExpense(values);
          
          
        }}
      >
        
        {(props) => (
          <Fragment>
            <View style={styles.container}>
              <View style={styles.formRow}>
              
                <View style={styles.iconContent}>
                  <View style={styles.circle}>
                    <FontAwesome name="plus" size={30} color="#afb8bb" />
                  </View>
                  <View style={styles.iconText}>
                    <Text style={styles.textColor}>Choose Icon</Text>
                  </View>
                </View>
                
                <TextInput
                  style={styles.inputName}
                  placeholder="Category Name"
                  onChangeText={props.handleChange("text")}
                  value={props.values.text}
                  onBlur={props.handleBlur("text")}
                />
                  
              </View>
              <Text style={globalStyles.error}>
                {props.touched.name && props.errors.name}
              </Text>
              <View style={styles.picker}>
                <Picker
                  mode="dropdown"
                  selectedValue={props.values.value}
                  onValueChange={(itemValue) => {
                    props.setFieldValue("value", itemValue);
                    setValue(itemValue);
                  }}
                >
                  <Picker.Item
                    label="Choose Transaction Type"
                    value={initialValues.value}
                    key={0}
                    color="#afb8bb"
                  />
                  {values.map((value, index) => (
                    <Picker.Item label={value} value={index} key={index} />
                  ))}
                </Picker>
              </View>
              <SubmitButton title="Save" onPress={props.handleSubmit}/>
            </View>
          </Fragment>
        )}
       
      </Formik>
   
    </Modal>
    
  );
}
const styles = StyleSheet.create({
  headerText: {
    fontSize: 20,
    marginLeft: 5,
  },
  container: {
    flex: 1,
    marginTop: 20,
  },
  circle: {
    alignItems: "center",
    justifyContent: "center",
    height: 70,
    width: 70,

    borderColor: "#afb8bb",
    borderWidth: 2,

    borderRadius: 1000,
  },
  iconContent: {
    justifyContent: "center",

    alignItems: "center",
  },
  iconText: {
    marginTop: 10,
    alignItems: "flex-start",
  },
  textColor: {
    color: "#afb8bb",
  },
  formRow: {
    flexDirection: "row",
    paddingTop: "5%",
    paddingHorizontal: "2%",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
  },
  inputName: {
    borderColor: "#ddd",
    borderWidth: 1,
    width: "72%",
    margin: "3%",
    marginBottom: "9%",
    padding: "3%",
    borderRadius: 10,
  },
  picker: {
    borderWidth: 1,
    borderRadius: 10,
    marginHorizontal: "7%",
    borderColor: "#ddd",
  },
});

Expense Category Screen

Add category Modal

Category DropDown

Income Category Screen

Answer 1

我无法清楚地理解您的问题。您正在尝试添加“收入”、“费用”和“XYZ”等子类别，对吗？

    const subcategories=['Income, 'Expenses', 'X', 'Y', 'Z'];
     let subCategoryItem =subcategories.map( (s, i) => {
                return <Picker.Item key={i} value={s} label={s} />
            });

  

 <Picker
                selectedValue={this.state.selectedService}
                onValueChange={ (service) => ( this.setState({selectedService:service}) ) } >

                {subCategoryItem}

            </Picker>