React native t-comb-form-native和boolean函数接受术语

我有一张报名表，很好，很好！ 但是我想创建一个布尔字段：“terms”，我想在单击它时，它允许您验证表单。但如果未单击，则无法注册。 我不知道我怎么能做到这一点

我的想法是设定一个条件“如果条款被接受，那么=>表单将被验证，您可以进入您的帐户”。 在我看来，这是正确的方法，但我不知道如何才能做到这一点。也许在创建一个const术语时，就像我对电子邮件、电话和密码所做的那样，但如何编写它必须经过验证才能注册？可能在状态中有“接受错误”之类的内容，但我不知道如何在“条款”字段中传递“接受”选项

谢谢你的帮助

import React, { Component } from "react";
import {
  ScrollView,
  View,
  StyleSheet,
  Text,
  ImageBackground,
  AsyncStorage
} from "react-native";
import styles from "../../assets/Styles/Styles";
import i18n from "../../src/i18n";
import { storeProfileToken } from "../../src/common/util/MyPreferences";
import Button from "react-native-flat-button";
import {
  API_URL,
  API_SECRETKEY
} from "../../src/common/util/Constants";
import t from "tcomb-form-native";
import stylesheet from "../../assets/Styles/FormStyles";
import base64 from 'react-native-base64'

const Form = t.form.Form;

const Email = t.refinement(t.String, email => {
  const reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; //or any other regexp
  return reg.test(email);
});

const Phone = t.refinement(t.maybe(t.String), phone_number => {
  const reg = /^(?:\+\d{1,3}|0\d{1,3}|00\d{1,2})?(?:\s?\(\d+\))?(?:[-\/\s.]|\d)+$/; //or any other regexp
  return reg.test(phone_number);
});

const Pwd = t.refinement(t.String, password => {
  const reg = /^(?=.{8,})/; //or any other regexp
  return reg.test(password);
});

const User = t.struct({
  email: Email,
  password: Pwd,
  phone_number: Phone,
  terms: t.Boolean
});

const formStyles = {
  ...Form.stylesheet
};

const options = {
  fields: {
    email: {
      label: i18n.t("signup.input.email"),
      error: i18n.t("signup.error.email")
    },
    password: {
      password: true,
      secureTextEntry: true,
      label: i18n.t("signup.input.password"),
      error: i18n.t("signup.error.password")
    },
    phone_number: {
      label: i18n.t("signup.input.phone"),
      error: i18n.t("signup.error.phone")
    },
    terms: {
      label: i18n.t("signup.input.terms"),
      error: i18n.t("signup.error.terms")
    }
  },
  stylesheet: stylesheet
};

export default class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showProgress: null,
      email: "",
      password: "",
      phone_number: "",
      error: "",
      accepted :false
    };
  }

  async onRegisterPressed(email, pwd, phone, term) {
    //console.log("SIGNUP::email: ", email);
    //console.log("SIGNUP::email: ", pwd);
    //console.log("SIGNUP::email: ", phone);
    //console.log("SIGNUP::email: ", term);

    if (email != "" && pwd != "") {
      this.setState({ showProgress: true });
      try {
        let response = await fetch(
          API_URL +
            "/users?society_id=131&access_token=" +
            "accessToken" +
            "&lang=fr",
          {
            method: "POST",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              Authorization: "Bearer " + API_SECRETKEY
            },
            body: JSON.stringify({
              email: email,
              password: pwd,
              mobilephone: phone
            })
          }
        )
          .then(response => response.json())
          .then(responseData => {
            //console.log("YOU HAVE SUCCESFULLY LOGGED IN:", responseDocs)
            console.log("ok: ", responseData.status);

            if (responseData.status >= 200 && responseData.status < 300) {
              console.log("data: ", responseData.data);

              //Handle success
              let accessToken = responseData;
              console.log(accessToken);
              //On success we will store the access_token in the AsyncStorage
              this.storeProfileToken(accessToken);
              this.redirect(MyTrips);
            } else {
              //Handle error
              console.log("data-error: ", responseData.data.error);
              let error = responseData;
              throw responseData.data.error;
            }
          });

        return result;
      } catch (error) {
        this.setState({ error: error });
        console.log("error " + error);
        this.setState({ showProgress: false });
      }
    }
  }

  handleSubmit = async () => {
    const data = this._form.getValue();
    //console.log("SIGNUP::data: ", data);

    if (data && data.email && data.password && data.terms) {
      this.onRegisterPressed(
        data.email,
        data.password,
        data.phone_number,
        data.terms
      );
    } /*else if (terms = ok) {
      this.setState({accepted:true})
    } else {this.props.navigation.navigate("Authentication")}*/
  };
  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/bg_mobile_paysage.jpg")}
        style={{ flex: 1 }}
      >
        <ScrollView>
        <View style={styles.container}>
          <Text style={styles.h5}>{"\n"}</Text>
          <Text style={styles.h1}>{i18n.t("signup.title")}</Text>
          <Text style={styles.h5}>{"\n"}</Text>
          <Form ref={c => (this._form = c)} type={User} options={options} />
          <Button
            containerStyle={[styles.mybtnContainer]}
            style={styles.mybtn}
            onPress={this.handleSubmit}
          >
            {i18n.t("signup.action.subscribe").toUpperCase()}
          </Button>
          <Button
            onPress={() => this.props.navigation.navigate("Login")}
            containerStyle={[styles.mybtnContainer, styles.btnContainerMuted]}
            style={styles.mybtn}
          >
            {i18n.t("signup.action.haveAccount").toUpperCase()}
          </Button>
          </View>
        </ScrollView>
      </ImageBackground>
    );
  }
}

import React，{Component}来自“React”；
进口{
滚动视图，
看法
样式表，
文本，
图像背景，
异步存储
}从“反应本族语”；
从“../../assets/styles/styles”导入样式；
从“../../src/i18n”导入i18n；
从“./../src/common/util/MyPreferences”导入{storeProfileToken}”；
从“反应本机平面按钮”导入按钮；
进口{
API_URL，
API_保密密钥
}来自“../../src/common/util/Constants”；
从“tcomb form native”导入t；
从“../../assets/Styles/FormStyles”导入样式表；
从“react-native-base64”导入base64
const Form=t.Form.Form；
const Email=t.definition（t.String，Email=>{
常量reg=/[a-z0-9！#$%&'*+/=？（？：\.[a-z0-9！#$%&'*+/=？（[a-z0-9]、（？：[a-z0-9-]*[a-z0-9]（？：[a-z0-9-]*[a-z0-9]）+[a-z0-9]+[a-z0-9]（？：[a-z0-9-]
返回注册测试（电子邮件）；
});
const Phone=t.definition（t.maybe（t.String），Phone\u number=>{
常量reg=/^（？：+\d{1,3}0\d{1,3}00\d{1,2}）？（？：\s？\（\d+\）？（？：[-\/\s.]\\d）+$/；//或任何其他正则表达式
返回注册测试（电话号码）；
});
const Pwd=t.definition（t.String，password=>{
常量reg=/^（？=.{8，}）//；//或任何其他regexp
返回注册测试（密码）；
});
const User=t.struct({
电邮:电邮,，
密码：Pwd，
电话号码：电话，
术语：t.布尔
});
const formStyles={
…表单样式表
};
常量选项={
字段：{
电邮：{
标签：i18n.t（“注册.输入.电子邮件”），
错误：i18n.t（“signup.error.email”）
},
密码：{
密码：true，
secureTextEntry:true，
标签：i18n.t（“注册.输入.密码”），
错误：i18n.t（“signup.error.password”）
},
电话号码：{
标签：i18n.t（“注册.输入.电话”），
错误：i18n.t（“signup.error.phone”）
},
条款：{
标签：i18n.t（“signup.input.terms”），
错误：i18n.t（“signup.error.terms”）
}
},
样式表：样式表
};
导出默认类注册扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showProgress:null，
电邮：“，
密码：“”，
电话号码：“，
错误：“”，
接受：错误
};
}
异步onRegisterPressed（电子邮件、pwd、电话、术语）{
//日志（“注册：：电子邮件：”，电子邮件）；
//日志（“注册：：电子邮件：”，pwd）；
//日志（“注册：：电子邮件：”，电话）；
//日志（“注册：：电子邮件：”，术语）；
如果（电子邮件！=“”&&pwd！=“”）{
this.setState（{showProgress:true}）；
试一试{
let response=等待获取(
API_URL+
“/users？society_id=131&access_token=”+
“accessToken”+
“&lang=fr”，
{
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
授权：“持有人”+API_保密密钥
},
正文：JSON.stringify({
电邮:电邮,，
密码：pwd，
手机
})
}
)
.then（response=>response.json（））
.然后（响应数据=>{
//log（“您已成功登录：”，responseDocs）
日志（“确定：”，响应数据状态）；
如果（responseData.status>=200和&responseData.status<300）{
日志（“数据：”，responseData.data）；
//成功
让accessToken=responseData；
日志（accessToken）；
//成功后，我们将把访问令牌存储在异步存储器中
此.storeProfileToken（accessToken）；
这个.重定向（MyTrips）；
}否则{
//处理错误
log（“数据错误：”，responseData.data.error）；
让误差=响应数据；
抛出响应data.data.error；
}
});
返回结果；
}捕获（错误）{
this.setState（{error:error}）；
console.log（“错误”+错误）；
this.setState（{showProgress:false}）；
}
}
}
handleSubmit=async（）=>{
const data=this._form.getValue（）；
//log（“注册：：数据：”，数据）；
if（data&&data.email&&data.password&&data.terms）{
此.onRegisterPressed(
data.email，
data.password，
数据。电话号码，
数据.术语
);
}/*其他条件（条件=正常）{
this.setState（{accepted:true}）
}else{this.props.navigation.navigate（“身份验证”）}*/
};
render（）{
返回(
{“\n”}
{i18n.t（“signup.title”）}
{“\n”}
（this._form=c）}type={User}options={options}/>
{i18n.t（“signup.action.subscribe”）.toUpperCase（）}
this.props.navigation.navigate（“Login”）}
containerStyle={[styles.mybtnContainer，styles.btnContainerMuted]}
style={style.mybtn}
>
{i18n.t（“signup.action.haveAccount”）.toUpperCase（）}
);
}
}

我在“已接受：错误”状态下添加 单击术语时将其传递为true “this.setState（{accepted:true}）；”

也许这会有帮助

  handleSubmit = async () => {
    const data = this._form.getValue();

    if (
      data &&
      data.email &&
      data.password &&
      data.terms &&
      data.terms === false
    ) {
      return;
    } else if (data && data.email && data.password && data.terms) {
      console.log("SIGNUP::term: ", data.terms);
      this.setState({ accepted: true });
      this.onRegisterPressed(
        data.email,
        data.password,
        data.phone_number,
        data.terms
      );
    } /*
  } else {this.props.navigation.navigate("Authentication")}*/
  };