使用tcomb-form-native的React-native形式：空时出错

Question

我在我的应用程序中使用tcomb-form-native创建登录页面。一切正常。 我想添加一个细节：当输入为空时，我希望表单处于“错误”配置。 我的意思是，当用户访问页面时，我希望所有字段都显示为红色，并显示错误消息。现在，仅在用户单击“登录”后才显示错误。 我是react-native的新手，我真的不知道可以在代码中的哪里添加它。 感谢您的帮助！

我的一种形式，例如：

import React, { Component } from "react";
import { View, StyleSheet, Text, ImageBackground } from "react-native";
import styles from "../../assets/Styles/Styles";
import i18n from "../../src/i18n";
import Button from "react-native-flat-button";

import t from "tcomb-form-native";

const Form = t.form.Form;

const User = t.struct({
  email: t.String,
  username: t.maybe(t.String),
  password: t.String,
  terms: t.Boolean
});

const formStyles = {
  ...Form.stylesheet,
  formGroup: {
    normal: {
      marginBottom: 10
    }
  },
  controlLabel: {
    normal: {
      color: "#6C6363",
      fontSize: 18,
      marginBottom: 7,
      fontWeight: "600"
    },
    // the style applied when a validation error occours
    error: {
      color: "red",
      fontSize: 18,
      marginBottom: 7,
      fontWeight: "600"
    }
  }
};

const options = {
  fields: {
    email: {
      error:
        "Without an email address how are you going to reset your password when you forget it?"
    },
    password: {
      error:
        "Choose something you use on a dozen other sites or something you won't remember"
    }
  },
  stylesheet: formStyles
};

export default class Login extends Component {
  handleSubmit = () => {
    const value = this._form.getValue();
    console.log("value: ", value);
  };

  storeToken(responseData){
     AsyncStorage.setItem(ACCESS_TOKEN, responseData, (err)=> {
       if(err){
         console.log("an error");
         throw err;
       }
       console.log("success");
     }).catch((err)=> {
         console.log("error is: " + err);
     });
   }
   async onLoginPressed() {
     this.setState({showProgress: true})
     try {
       let response = await fetch('https://www.weecoop.org/api/clients?[ {user_id} ]&[ {mail} ]&[ {access_token} ]', {
                               method: 'POST',
                               headers: {
                                 'Accept': 'application/json',
                                 'Content-Type': 'application/json',
                               },
                               body: JSON.stringify({
                                 session:{
                                   email: this.state.email,
                                   password: this.state.password,
                                 }
                               })
                             });
       let res = await response.text();
       if (response.status >= 200 && response.status < 300) {
           //Handle success
           let accessToken = res;
           console.log(accessToken);
           //On success we will store the access_token in the AsyncStorage
           this.storeToken(accessToken);
           this.redirect('home');
       } else {
           //Handle error
           let error = res;
           throw error;
       }
     } catch(error) {
         this.setState({error: error});
         console.log("error " + error);
         this.setState({showProgress: false});
     }
   }

  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/bg_mobile_paysage.jpg")}
        style={{ flex: 1 }}
      >
        <View style={styles.container}>
          <Form ref={c => (this._form = c)} type={User} options={options} />
          <Button
            type="custom"
            containerStyle={styles.mybtnContainer}
            style={styles.mybtn}
            onPress={this.handleSubmit}
          >
            {" "}
            Sign up test{" "}
          </Button>
          <Button
            onPress={() => this.props.navigation.navigate("TabBar")}
            containerStyle={styles.mybtnContainer}
            style={styles.mybtn}
          >
            {i18n.t("login.action.connect").toUpperCase()}
          </Button>

          <Text>{"\n"}</Text>
          <Text style={styles.h5}>
            {"\n"}
            {i18n.t("login.action.choice")}
          </Text>
          <Button
            type="custom"
            onPress={() => this.props.navigation.navigate("Signup")}
            containerStyle={[styles.mybtnContainer, styles.btnContainerMuted]}
            style={styles.mybtn}
          >
            {i18n.t("login.action.createAccount").toUpperCase()}
          </Button>
        </View>
      </ImageBackground>
    );
  }
}