1

我正在与

  • 反应原生
  • 世博会
  • 反应原生日期选择器
  • tcomb-form-native
  • 使用模板的表格

我做了一个具有以下结构的注册表单

  name: t.String,
  email: formValidation.email,
  password: formValidation.password,
  gender: t.Boolean,
  birthday: t.Date,
  cellphone: t.Number

import React from "react";

import t from "tcomb-form-native";
import formValidation from "../utils/Validation";
import inputTemplate from "../forms/templates/Input";
import buttonGroupTemplate from "../forms/templates/ButtonGroup";
import datePickerTemplate from "../forms/templates/DatePicker";
import phoneInputTemplate from "../forms/templates/PhoneInput";

export const RegisterStruct = t.struct({
  name: t.String,
  email: formValidation.email,
  password: formValidation.password,
  gender: t.Boolean,
  birthday: t.Date,
  cellphone: t.Number
});

export const RegisterOptions = {
  fields: {
    name: {
      template: inputTemplate,
      config: {
        placeholder: "Introduce tu nombre completo",
        iconType: "material-community",
        iconName: "account-outline"
      }
    },
    email: {
      template: inputTemplate,
      config: {
        placeholder: "Introduce tu correo electrónico",
        iconType: "material-community",
        iconName: "at"
      }
    },
    password: {
      template: inputTemplate,
      config: {
        placeholder: "Introduce tu clave",
        iconType: "material-community",
        iconName: "lock-outline",
        password: true,
        secureTextEntry: true
      }
    },
    gender: {
      template: buttonGroupTemplate,
      config: {
        buttons: ["Masculino", "Femenino"]
      }
    },
    birthday: {
      template: datePickerTemplate,
      config: {
        placeholder: "Selecciona tu fecha de nacimiento",
        date: "2016-05-15"
      }
    },
    cellphone: {
      template: phoneInputTemplate,
      config: {
        placeholder: "Introduce tu número de celular"
      }
    }
  }
};

这是我的模板

import React from "react";
import { StyleSheet, View } from "react-native";
import DatePicker from "react-native-datepicker";
import { Dimensions } from "react-native";
import { red } from "ansi-colors";

export default (datePickerTemplate = locals => {
  return (
    <View style={styles.viewContainer}>
      <DatePicker
        style={styles.customDatePicker}
        date={date}
        mode="date"
        placeholder={locals.config.placeholder}
        format="DD-MM-YYYY"
        minDate="01-05-2016"
        maxDate="01-06-2020"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: "absolute",
            right: 0,
            top: 4,
            marginRight: 0
          },
          dateInput: {
            borderColor: "#FFFFFF",
            borderBottomColor: "#3F3F3F"
          },
          placeholderText: {
            alignSelf: "flex-start",
            fontSize: 17
          }
        }}
        onDateChange={date => locals.onChange(date)}
      />
    </View>
  );
});

const styles = StyleSheet.create({
  viewContainer: {
    flexDirection: "row",
    marginTop: 12,
    marginBottom: 12
  },
  customDatePicker: {
    flex: 1,
    marginRight: 10,
    marginLeft: 10
  }
});

当我在日历上选择正确更改但在屏幕上看到相同日期的日期时，用户界面中的日期字段不会更改应显示所选日期。

在此处输入图像描述

我使用下面的代码在控制台上显示日期更改。

onChangeFormRegister = formValue => {
    console.log(formValue);
    this.setState({
      formData: formValue
    });
  };

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  render() {
    const { registerStruct, registerOptions, formErrorMessage } = this.state;

    return (
      <ScrollView style={styles.viewBody}>
        <Form
          ref="registerForm"
          type={RegisterStruct}
          options={RegisterOptions}
          value={this.state.formData}
          onChange={formValue => this.onChangeFormRegister(formValue)}
        />
4

0 回答 0