Question

我对React Native非常陌生。我正在尝试使用一些自定义表单验证方法来创建功能全面的登录屏幕。由于React中的setState方法是异步的，因此我现在已备有表单验证。看到我下面的代码，有人可以推荐我什么是最佳实践。

我希望用户按照以下说明进行旅行

用户输入他/她的电子邮件地址和密码，然后单击“注册”按钮，我将验证输入内容，如果有错误，我将设置错误状态并显示错误消息。如果我的状态等于空字符串，这意味着没有验证错误，我可以继续进行操作。下面是完整的注册屏幕代码

import React, {useState, useEffect} from 'react';
import {
  Container,
  Content,
  H1,
  Form,
  Item,
  Label,
  Input,
  Button,
  Text,
  Icon,
} from 'native-base';
import {globalStyles} from '../../helper/globalStyles';
import {
  vaidateEmailAddress,
  validatePassword,
} from '../../helper/validationfunctions';

const RegisterScreen = ({navigation}) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [emailInputError, setEmailInputError] = useState(null);
  const [emailInputErrorMessage, setEmailInputErrorMessage] = useState('');

  const [passwordInputError, setPasswordInputError] = useState(null);
  const [passwordInputErrorMessage, setPasswordInputErrorMessage] = useState(
    '',
  );

  return (
    <Container style={globalStyles.container}>
      <Content contentContainerStyle={globalStyles.content}>
        <H1>Register</H1>
        <H1 />
        <Form>
          <Item error={emailInputError} style={globalStyles.item}>
            <Label>Email</Label>
            <Input
              onChangeText={text => {
                setEmail(text);
              }}
            />
          </Item>
          {emailInputError && (
            <Item style={globalStyles.erroritem}>
              <Icon name="ios-close-circle" style={{color: 'red'}} />
              <Text style={globalStyles.erroritemText}>
                {emailInputErrorMessage}
              </Text>
            </Item>
          )}
          <Item error={passwordInputError} style={globalStyles.item}>
            <Label style={globalStyles.labelText}>Password</Label>
            <Input
              style={globalStyles.input}
              onChangeText={text => {
                setPassword(text);
              }}
            />
          </Item>

          {passwordInputError && (
            <Item style={globalStyles.erroritem}>
              <Icon name="ios-close-circle" style={{color: 'red'}} />
              <Text style={globalStyles.erroritemText}>
                {passwordInputErrorMessage}
              </Text>
            </Item>
          )}

          <Item style={(globalStyles.item, globalStyles.lastItem)} last>
            <Button
              onPress={() => {
                //First Validate Empty Field
                if (
                  email === '' ||
                  email === null ||
                  !vaidateEmailAddress(email)
                ) {
                  setEmailInputError('error');
                  console.log('Value changed' + emailInputError);
                  setEmailInputErrorMessage(
                    'The email you provided is not a valid email address',
                  );

                  console.log(email === '');
                  console.log(email === null);
                  console.log(vaidateEmailAddress(email));
                }
                if (
                  password === '' ||
                  password === null ||
                  !validatePassword(password)
                ) {
                  setPasswordInputError('error');
                  setPasswordInputErrorMessage(
                    'The password you provided is not a valid password',
                  );
                }
                setTimeout(() => {
                  if (emailInputError === null && passwordInputError === null) {
                    console.log(
                      'Email: ' +
                        emailInputError +
                        ' Password: ' +
                        passwordInputError +
                        ' I am fired',
                    );
                    // TODO: Add firebase code
                  }
                }, 100);

                navigation.navigate('RegisterScreen');
              }}>
              <Text>Signup</Text>
            </Button>
          </Item>

          <Item style={(globalStyles.item, globalStyles.lastItem)} last>
            <Button
              bordered
              onPress={() => {
                navigation.pop();
              }}>
              <Text>Go Back</Text>
            </Button>
          </Item>
        </Form>
      </Content>
    </Container>
  );
};

export default RegisterScreen;

Answer 1

撰写和验证表格可能会很痛苦:( 我建议使用第三方库来使您的生活更轻松。 Formik是React Native最好的库之一。您可以找到React Native集成here的文档。

反应本机表单验证方法

1 个答案: