React native 如何在tcomb for n本机模板中使用DatePicker？

我和你一起工作

• 自然反应
• 博览会
• 反应本机日期选择器
• tcomb格式本机
• 使用模板的表单

我做了一个注册表，它有以下结构

  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
  }
});

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从“react native DatePicker”导入日期选择器；
从“react native”导入{Dimensions}；
从“ansi颜色”导入{red}；
导出默认值（datePickerTemplate=locals=>{
返回(
locals.onChange（日期）}
/>
);
});
const styles=StyleSheet.create({
视图容器：{
flexDirection:“行”，
玛金托普：12，
marginBottom:12
},
customDatePicker：{
弹性：1，
marginRight:10，
边缘左侧：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)}
        />

onChangeFormRegister=formValue=>{
console.log（formValue）；
这是我的国家({
formData:formValue
});
};
更新索引（已选择索引）{
this.setState（{selectedIndex}）；
}
render（）{
const{registerStruct，registerOptions，formErrorMessage}=this.state；
返回(
this.onChangeFormRegister（formValue）}
/>

这是否意味着当您两次选择同一日期时，它不会改变？当我选择不同的日期时，我不知道如何在“日期”字段中获取更改的日期值在模板中，在状态下我可以这样做，但在模板内我不知道这意味着当您选择两次相同的日期时，它不会改变吗？当我选择不同的日期时，我不知道如何在模板中的“日期”字段中获得更改的日期值，在状态下我可以这样做，但在模板内我不知道如何