React Native表单验证：实现实时错误消息显示

// AuthContextProvider.js
import React, { useState, createContext } from "react";

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null); // 用于通用错误
    const [user, setUser] = useState(null);
    const [emailValidError, setEmailValidError] = useState(""); // 用于邮箱字段特有的错误

    const handleValidEmail = (val) => {
        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;

        if (val.length === 0) {
            setEmailValidError("邮箱地址不能为空");
        } else if (reg.test(val) === false) {
            setEmailValidError("请输入有效的邮箱地址");
        } else if (reg.test(val) === true) {
            setEmailValidError(""); // 验证通过则清空错误
        }
    };

    // ... 其他认证相关函数如 onRegister, onLogin

    return (
        <AuthContext.Provider
            value={{
                // ... 其他共享值
                handleValidEmail,
                emailValidError, // 暴露邮箱验证错误状态
            }}>
            {children}
        </AuthContext.Provider>
    );
};

// RegisterScreen.js
import React, { useState, useContext } from "react";
// ... 导入其他组件

export const RegisterScreen = ({ navigation }) => {
    const [email, setEmail] = useState("");
    // ... 其他状态
    const { onRegister, isLoading, error, handleValidEmail, emailValidError } =
        useContext(AuthContext); // 从Context中获取 emailValidError

    return (
        <AccountBackground>
            <AccountCover />
            <Title> app</Title>
            <AccountContainer>
                <AuthInput
                    label="E-mail"
                    value={email}
                    textContentType="emailAddress"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText={(u) => {
                        setEmail(u);
                        handleValidEmail(u); // 触发邮箱验证
                    }}
                    error={emailValidError} // 将 emailValidError 传递给 AuthInput 的 error prop
                />
                {/* ... 其他输入字段 */}
                {error && ( // 这是通用错误，例如密码不匹配或注册失败
                    <ErrorContainer size="large">
                        <Text variant="error">{error}</Text>
                    </ErrorContainer>
                )}
                {/* ... 注册按钮等 */}
            </AccountContainer>
            {/* ... 返回按钮 */}
        </AccountBackground>
    );
};

// AuthInput.js (示例，假设 AuthInput 是一个功能组件)
import React from 'react';
import { Text, TextInput } from 'react-native';
import styled from 'styled-components/native';

// 可以为输入框和错误文本定义一个容器
const InputWrapper = styled.View`
    width: 200px; // 保持原有的宽度
    margin-bottom: 16px; // 为错误信息留出空间
`;

// 原始的 AuthInput 作为内部的 TextInput
const StyledTextInput = styled(TextInput)`
    background-color: #c6daf7;
    padding: 10px;
    border-radius: 5px;
    // 可以根据是否有错误来改变边框颜色等样式
    border-bottom-color: ${props => props.hasError ? 'red' : 'transparent'};
    border-bottom-width: ${props => props.hasError ? '1px' : '0px'};
`;

// 错误文本的样式
const ErrorText = styled(Text)`
    color: red;
    font-size: 12px;
    margin-top: 4px;
    align-self: flex-start; // 错误信息靠左对齐
`;

// 最终导出的 AuthInput 组件
export const AuthInput = ({ label, error, ...props }) => {
    return (
        <InputWrapper>
            <StyledTextInput
                placeholder={label} // 使用 label 作为 placeholder 或 TextInput 的 label
                hasError={!!error} // 传递一个布尔值用于样式判断
                {...props}
            />
            {error && <ErrorText>{error}</ErrorText>} {/* 条件渲染错误信息 */}
        </InputWrapper>
    );
};