forms - 自定义 tcomb-form-native 的数据域

Question

我正在尝试自定义模块的Data字段tcomb-form-native。

我希望日期字段是一个经典的输入字段，但我仍然尝试了不同的方法，但我没有成功。

我试图覆盖datepicker字段样式，但在打开选择器以插入日期而不是消息周围时放置样式。

我想随意插入一个短语，而不是“点击此处选择日期”。我能怎么做？

另外，如何自定义日期格式？我尝试关注this issue of github，但没有解决问题。这是格式化数据的代码部分：

config: {
  format: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
  dateFormat: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
  timeFormat: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
}

Answer 1

好的。我可以给你我的代码。我很难找到它，但最后，一切都在 tcomb 文档中。

回答您的问题的两个要点是：“ defaultValueText ”和“ format: (date) => ... ”

import React, { Component } from "react";
import Expo from "expo";
import t from "tcomb-form-native";
import moment from 'moment';
import { StyleSheet, Text, Date} from "react-native";
import { Button } from "react-native-elements";

const Form = t.form.Form;

Form.stylesheet.dateValue.normal.borderColor = '#d0d2d3';
Form.stylesheet.dateValue.normal.backgroundColor = '#ffffff';
Form.stylesheet.dateValue.normal.borderRadius= 5,
Form.stylesheet.dateValue.normal.color = 'grey';
Form.stylesheet.dateValue.normal.borderWidth = 1;

const User = t.struct({
  pseudo: t.String,
  birthday: t.Date,
});

const options = {
    order: ['pseudo','birthday'],
    fields: {
    pseudo: {
        placeholder: 'Enter Name',
        error: 'Name is empty?',
      },
      birthday: {
         mode: 'date',
         label: 'birthday',
         config: {
            defaultValueText: 'Enter birthday', // Allows you to format the PlaceHolders !!
            format: (date) => {
               return moment(date).format('DD-MM-YYYY'); // Allows you to format the date !!
            },
          }
      },
    },
};

……

export default class SignUp extends Component {
state = {...

  render() {
      return (
        <View style={styles.container}>
          <Form
            type={User}
            ref={c => (this._form = c)} // assign a ref
            options={options} //set form options
          />

          <Button
            title="Sign Up!"
            buttonStyle={styles.button}
            onPress={this.handleSubmit}
          />
        </View>
      );
    }
  }
 } ...