(React Native) 如何从类到函数

问题描述

我的英文不是很好；我准备了一份申请。我想使用以下 class 结构作为 function 或 const。我怎样才能做到这一点？我想用函数组件来使用props。

我添加了整个代码。 年龄计算应用。

我使用了useState - useEffect，它没有成功。

等待帮助，谢谢

import React 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");

export default class App extends React.Component {
  state = {
    isDateTimePickerVisible: false,date: undefined,};

  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = (date) => {
    date = new Date(date);
    this.setState({ date: date },() => {
      this._hideDateTimePicker();
      this._calculateTheDifference();
    });
  };
  _calculateTheDifference() {
    if (!this.state.date) {
      return;
    }
    let current_date = new Date().getDate();
    let current_month = new Date().getMonth();
    let current_year = new Date().getFullYear();
    let birth_date = this.state.date.getDate();
    let birth_month = this.state.date.getMonth();
    let birth_year = this.state.date.getFullYear();
    let month = [31,28,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;
    }
    let calculated_date = current_date - birth_date;
    let calculated_month = current_month - birth_month;
    let calculated_year = current_year - birth_year;
    if (calculated_date || calculated_month || calculated_year)
      this.setState({
        calculated_date: calculated_date,calculated_month: calculated_month,calculated_year: calculated_year,dateOpacity: 1,});
  }

  render() {
    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={this._showDateTimePicker}
          >
            <Text style={styles.dogumGunu}>Enter your birthday.</Text>
          </TouchableOpacity>
          <View style={[styles.viewText,{ padding: 10 }]}>
            <Text style={styles.text}>
              {this.state.calculated_year}
              {" Year"}{" "}
            </Text>
            <Text style={styles.text}>
              {this.state.calculated_month}
              {" Month"}{" "}
            </Text>
            <Text style={styles.text}>
              {this.state.calculated_date}
              {" Date"}{" "}
            </Text>
          </View>
        </View>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          mode={"date"}
          maximumDate={new Date()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,},slider: {
    ...Platform.select({
      ios: {
        height: 0.3 * height,backgroundColor: "#C12699",borderBottomrighTradius: 65,android: {
        height: 0.3 * height,backgroundColor: "#009A88",}),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",borderRadius: 10,android: {
        height: 120,width: Dimensions.get("window").height / 2,top: 40,dogumGunu: {
    ...Platform.select({
      ios: {
        fontSize: 20,borderWidth: 2,borderColor: "#fff",padding: 20,android: {
        fontSize: 20,padding: 10,yasHesaplama: {
    ...Platform.select({
      ios: {
        top: 100,fontSize: 40,android: {
        top: 50,fontSize: 35,touchableOpacity: {
    ...Platform.select({
      ios: {
        height: 100,width: Dimensions.get("window").height / 3,android: {
        height: 80,width: Dimensions.get("window").height / 2.3,anaGovde: {
    ...Platform.select({
      ios: {
        flex: 1,justifyContent: "space-between",bottom: 210,android: {
        flex: 1,bottom: 150,solKose: {
    ...Platform.select({
      ios: {
        ...StyleSheet.absoluteFillObject,android: {
        ...StyleSheet.absoluteFillObject,});

解决方法

它看起来像这样

import React from 'react';
import { View,Text } from 'react-native';

import { connect } from 'react-redux';

export default function Rewards(props) {
  const [state,setState] = React.useState({
    isDateTimePickerVisible: false,date: undefined,millSecLeft: 0,dateOpacity: 1,});

  console.log(props); // Your props here

  const _showDateTimePicker = () =>
    setState({ ...state,isDateTimePickerVisible: true });

  const _hideDateTimePicker = () =>
    setState({ ...state,isDateTimePickerVisible: false });

  const _handleDatePicked = (date) => {
    date = new Date(date);
    setState({ date: date },() => {
      _hideDateTimePicker();
      _calculateTheDifference();
    });
  };

  const _calculateTheDifference = () => {
    if (!state.date) {
      return;
    }
    let current_date = new Date().getDate();
    let current_month = new Date().getMonth();
    let current_year = new Date().getFullYear();
    let birth_date = state.date.getDate();
    let birth_month = state.date.getMonth();
    let birth_year = state.date.getFullYear();
    let month = [31,28,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;
    }
    let calculated_date = current_date - birth_date;
    let calculated_month = current_month - birth_month;
    let calculated_year = current_year - birth_year;
    if (calculated_date || calculated_month || calculated_year)
      setState({
        ...state,calculated_date: calculated_date,calculated_month: calculated_month,calculated_year: calculated_year,});
  };

  return <View>{/*Code here*/}</View>;
}

,

您不能在 React 钩子中将回调函数作为 setState 中的第二个参数传递（它仅适用于 Class 组件），因此您可以改用 useEffect 和控制您的应用程序生命周期。对于这种情况，您可以按照以下步骤操作：

React.useEffect(()=> {
   if ( state.date ){
     _hideDateTimePicker();
     _calculateTheDifference();
   };
},[state])

并且您还需要将 _handleDatePicked 更改为：

const _handleDatePicked = (date) => {
    date = new Date(date);
    setState({ 
       ...state,date: date 
    });
};

,

已经修复了，但是没有用。

function Rewards({ appTheme }) {
  const [state,setState] = useState({
    isDateTimePickerVisible: false,});

  const _showDateTimePicker = () =>
    setState({ ...state,isDateTimePickerVisible: false });

  useEffect(() => {
    if (state.date) {
      _hideDateTimePicker();
      _calculateTheDifference();
    }
  },[state]);

  const _handleDatePicked = (date) => {
    date = new Date(date);
    setState({
      ...state,date: date,});
  };
  const _calculateTheDifference = () => {
    if (!state.date) {
      return;
    }
    let current_date = new Date().getDate();
    let current_month = new Date().getMonth();
    let current_year = new Date().getFullYear();
    let birth_date = state.date.getDate();
    let birth_month = state.date.getMonth();
    let birth_year = state.date.getFullYear();
    let month = [31,});
  };

  return (
    <View style={styles.container}>
      <HeaderBarYas />

      <FlatList
        style={{
          marginTop: -25,borderTopLeftRadius: SIZES.radius * 2,borderTopRightRadius: SIZES.radius * 2,backgroundColor: COLORS.lightGray3,}}
      />
      <View style={styles.anaGovde}>
        <TouchableOpacity
          style={styles.touchableOpacity}
          onPress={_showDateTimePicker}
        >
          <Text style={styles.dogumGunu}>Doğum Gününü Giriniz</Text>
        </TouchableOpacity>
        <View style={[styles.viewText,{ padding: 10 }]}>
          <Text style={styles.text}>
            {state.calculated_year}
            {" Yıl"}{" "}
          </Text>
          <Text style={styles.text}>
            {state.calculated_month}
            {" Ay"}{" "}
          </Text>
          <Text style={styles.text}>
            {state.calculated_date}
            {" Gün"}{" "}
          </Text>
        </View>
      </View>
      <DateTimePicker
        isVisible={state.isDateTimePickerVisible}
        onConfirm={_handleDatePicked}
        onCancel={_hideDateTimePicker}
        mode={"date"}
        locale="tr_TR"
        maximumDate={new Date()}
      />
    </View>
  );
}

,

我通过 React Hooks 将您的代码重写为函数式编程，我也在 android 模拟器中对其进行了测试，并且工作正常。您可以在下面看到输出项目的示例：

和项目代码：

import React 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 = ()=> {

  const [states,setStates] = React.useState({
    calculated_date: undefined,calculated_month: undefined,calculated_year: undefined,dateOpacity: undefined
  });

  const [isDateTimePickerVisible,setIsDateTimePickerVisible] = React.useState(false);
  const [date,setDate] = React.useState(undefined);

  const _showDateTimePicker = () => setIsDateTimePickerVisible(true);
  
  const  _hideDateTimePicker = () => setIsDateTimePickerVisible(false);
  
  const _handleDatePicked = (date)=> {
    date = new Date(date);
    return setDate(date);
  };

  const _calculateTheDifference = () => {
    if (!date) {
      return;
    }

    const currentDate = new Date();

    let current_date = currentDate.getDate();
    let current_month = currentDate.getMonth();
    let current_year = currentDate.getFullYear();

    let birth_date = date.getDate();
    let birth_month = date.getMonth();
    let birth_year = date.getFullYear();

    let month = [31,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;
    }

    let calculated_date = current_date - birth_date;
    let calculated_month = current_month - birth_month;
    let calculated_year = current_year - birth_year;

    if (calculated_date || calculated_month || calculated_year)
      setStates({
        ...states,calculated_date,calculated_month,calculated_year,});
  };

  React.useEffect(()=>{
      if (date){
        console.log("Selected Date:",date);
          _hideDateTimePicker();
          _calculateTheDifference();
      };
  },[date]);

  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}>
            {states.calculated_year}
            {" Year"}{" "}
          </Text>
          <Text style={styles.text}>
            {states.calculated_month}
            {" Month"}{" "}
          </Text>
          <Text style={styles.text}>
            {states.calculated_date}
            {" 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,},slider: {
    ...Platform.select({
      ios: {
        height: 0.3 * height,backgroundColor: "#C12699",borderBottomRightRadius: 65,android: {
        height: 0.3 * height,backgroundColor: "#009A88",}),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",borderRadius: 10,android: {
        height: 120,width: Dimensions.get("window").height / 2,top: 40,dogumGunu: {
    ...Platform.select({
      ios: {
        fontSize: 20,borderWidth: 2,borderColor: "#fff",padding: 20,android: {
        fontSize: 20,padding: 10,yasHesaplama: {
    ...Platform.select({
      ios: {
        top: 100,fontSize: 40,android: {
        top: 50,fontSize: 35,touchableOpacity: {
    ...Platform.select({
      ios: {
        height: 100,width: Dimensions.get("window").height / 3,android: {
        height: 80,width: Dimensions.get("window").height / 2.3,anaGovde: {
    ...Platform.select({
      ios: {
        flex: 1,justifyContent: "space-between",bottom: 210,android: {
        flex: 1,bottom: 150,solKose: {
    ...Platform.select({
      ios: {
        ...StyleSheet.absoluteFillObject,android: {
        ...StyleSheet.absoluteFillObject,});