React Native年龄计算应用Class组件转Function组件问题咨询

改造后完整函数组件代码 #

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  Platform,
  TouchableOpacity,
} from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";

const { height } = Dimensions.get("window");

const App = (props) => {
  // 状态定义 替换原有类组件state
  const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
  const [date, setDate] = useState(undefined);
  const [calculatedDate, setCalculatedDate] = useState(0);
  const [calculatedMonth, setCalculatedMonth] = useState(0);
  const [calculatedYear, setCalculatedYear] = useState(0);

  const showDateTimePicker = () => setIsDateTimePickerVisible(true);
  const hideDateTimePicker = () => setIsDateTimePickerVisible(false);

  const handleDatePicked = (pickedDate) => {
    const formattedDate = new Date(pickedDate);
    setDate(formattedDate);
    hideDateTimePicker();
    calculateTheDifference(formattedDate);
  };

  const calculateTheDifference = (birthDate) => {
    if (!birthDate) return;

    const current = new Date();
    let current_date = current.getDate();
    let current_month = current.getMonth();
    let current_year = current.getFullYear();
    let birth_date = birthDate.getDate();
    let birth_month = birthDate.getMonth();
    let birth_year = birthDate.getFullYear();

    const month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (birth_date > current_date) {
      current_month = current_month - 1;
      current_date = current_date + month[birth_month - 1];
    }
    if (birth_month > current_month) {
      current_year = current_year - 1;
      current_month = current_month + 12;
    }

    const calcDate = current_date - birth_date;
    const calcMonth = current_month - birth_month;
    const calcYear = current_year - birth_year;

    if (calcDate || calcMonth || calcYear) {
      setCalculatedDate(calcDate);
      setCalculatedMonth(calcMonth);
      setCalculatedYear(calcYear);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.slider}>
        <View style={{ justifyContent: "center", alignItems: "center" }}>
          <Text style={styles.yasHesaplama}>Age Calculate</Text>
        </View>
      </View>
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.solKose} />
        <View
          style={{
            flex: 1,
            backgroundColor: "#fff",
            borderTopLeftRadius: 65,
          }}
        />
      </View>
      <View style={styles.anaGovde}>
        <TouchableOpacity
          style={styles.touchableOpacity}
          onPress={showDateTimePicker}
        >
          <Text style={styles.dogumGunu}>Enter your birthday.</Text>
        </TouchableOpacity>
        <View style={[styles.viewText, { padding: 10 }]}>
          <Text style={styles.text}>
            {calculatedYear}
            {" Year"}{" "}
          </Text>
          <Text style={styles.text}>
            {calculatedMonth}
            {" Month"}{" "}
          </Text>
          <Text style={styles.text}>
            {calculatedDate}
            {" Date"}{" "}
          </Text>
        </View>
      </View>
      <DateTimePicker
        isVisible={isDateTimePickerVisible}
        onConfirm={handleDatePicked}
        onCancel={hideDateTimePicker}
        mode={"date"}
        maximumDate={new Date()}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  slider: {
    ...Platform.select({
      ios: {
        height: 0.3 * height,
        backgroundColor: "#C12699",
        borderBottomRightRadius: 65,
      },
      android: {
        height: 0.3 * height,
        backgroundColor: "#009A88",
        borderBottomRightRadius: 65,
      },
    }),
  },
  text: {
    paddingHorizontal: 5,
    justifyContent: "center",
    alignItems: "center",
    fontSize: 30,
    fontWeight: "bold",
    color: "#fff",
  },
  viewText: {
    ...Platform.select({
      ios: {
        height: 150,
        width: Dimensions.get("window").height / 2.6,
        flexDirection: "row",
        backgroundColor: "#C12699",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 10,
      },
      android: {
        height: 120,
        width: Dimensions.get("window").height / 2,
        flexDirection: "row",
        backgroundColor: "#009A88",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 10,
        top: 40,
      },
    }),
  },
  dogumGunu: {
    ...Platform.select({
      ios: {
        fontSize: 20,
        color: "#fff",
        fontWeight: "bold",
        borderWidth: 2,
        borderColor: "#fff",
        borderRadius: 10,
        padding: 20,
      },
      android: {
        fontSize: 20,
        color: "#fff",
        fontWeight: "bold",
        borderWidth: 2,
        borderColor: "#fff",
        borderRadius: 10,
        padding: 10,
      },
    }),
  },
  yasHesaplama: {
    ...Platform.select({
      ios: {
        top: 100,
        fontSize: 40,
        color: "#fff",
        fontWeight: "bold",
        borderWidth: 2,
        borderColor: "#fff",
        borderRadius: 10,
        padding: 20,
      },
      android: {
        top: 50,
        fontSize: 35,
        color: "#fff",
        fontWeight: "bold",
        borderWidth: 2,
        borderColor: "#fff",
        borderRadius: 10,
        padding: 10,
      },
    }),
  },
  touchableOpacity: {
    ...Platform.select({
      ios: {
        height: 100,
        width: Dimensions.get("window").height / 3,
        backgroundColor: "#C12699",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 10,
      },
      android: {
        height: 80,
        width: Dimensions.get("window").height / 2.3,
        backgroundColor: "#009A88",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 10,
      },
    }),
  },
  anaGovde: {
    ...Platform.select({
      ios: {
        flex: 1,
        justifyContent: "space-between",
        alignItems: "center",
        bottom: 210,
      },
      android: {
        flex: 1,
        justifyContent: "space-between",
        alignItems: "center",
        bottom: 150,
      },
    }),
  },
  solKose: {
    ...Platform.select({
      ios: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "#C12699",
      },
      android: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "#009A88",
      },
    }),
  },
});

改动说明 #

• 引入React内置的useState Hook替代类组件的state管理
• 组件改为函数声明形式，参数直接挂载props，可按需求在组件内使用传入的属性
• 移除所有this指向，原类方法改为普通函数直接调用
• 原有业务逻辑完全保留，功能和原类组件完全一致

内容的提问来源于stack exchange，提问作者kikirim