React Native表单实时错误提示：实现邮箱格式验证与显示

import React, { useState, createContext } from 'react';
// 假设 registerRequest, onLogin 等函数已定义

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 {
            setEmailValidError(""); // 验证通过，清空错误信息
        }
    };

    // 注册逻辑（此处省略部分细节，保留与错误处理相关的部分）
    const onRegister = async (email, username, password, password2) => {
        if (password !== password2) {
            setError("两次输入的密码不一致");
            return;
        }
        // ... 其他注册逻辑，如调用 registerRequest ...
        // 捕获注册过程中的后端错误
        // registerRequest(...)
        //     .catch((e) => {
        //         setIsLoading(false);
        //         setError(e.toString()); // 设置通用错误信息
        //     });
    };

    return (
        <AuthContext.Provider
            value={{
                isAuthenticated: !!user,
                isLoading,
                error, // 通用错误
                user,
                onRegister,
                handleValidEmail, // 邮箱验证函数
                emailValidError, // 邮箱字段错误
            }}>
            {children}
        </AuthContext.Provider>
    );
};

import React, { useState, useContext }
import { ActivityIndicator, Text } from 'react-native';
import styled from 'styled-components/native';
import { AuthContext } from '../../services/authentication/authentication.context'; // 假设路径正确
// 假设 AccountBackground, AccountCover, Title, Spacer, AuthButton 已定义
// 假设 ErrorContainer 已定义

// AuthInput 是一个自定义的样式化输入框组件，我们稍后会改造它
export const AuthInput = styled(TextInput)`
    width: 200px;
    background-color: #c6daf7;
`;

export const ErrorContainer = styled.View`
    max-width: 300px;
    align-items: center;
    align-self: center;
    margin-top: ${(props) => props.theme.space[2]};
    margin-bottom: ${(props) => props.theme.space[2]};
`;

export const RegisterScreen = ({ navigation }) => {
    const [email, setEmail] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [password2, setPassword2] = useState("");

    // 从 AuthContext 中获取所需的状态和函数
    const { onRegister, isLoading, error, handleValidEmail, emailValidError } =
        useContext(AuthContext);

    return (
        <AccountBackground>
            <AccountCover />
            <Title>注册</Title>
            <AccountContainer>
                <AuthInput
                    label="E-mail"
                    value={email}
                    textContentType="emailAddress"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText={(u) => {
                        setEmail(u); // 更新本地邮箱状态
                        handleValidEmail(u); // 调用邮箱验证函数
                    }}
                    // 将 emailValidError 传递给 AuthInput 组件
                    error={emailValidError}
                />

                <Spacer size="large">
                    <AuthInput
                        label="用户名"
                        value={username}
                        textContentType="username"
                        autoCapitalize="none"
                        onChangeText={(user) => setUsername(user)}
                    />
                </Spacer>
                {/* 其他密码输入框省略 */}

                {/* 显示通用错误信息，如密码不一致或后端返回的错误 */}
                {error && (
                    <ErrorContainer size="large">
                        <Text variant="error" style={{ color: 'red' }}>{error}</Text>
                    </ErrorContainer>
                )}
                <Spacer size="large">
                    {!isLoading ? (
                        <AuthButton
                            icon="email"
                            mode="contained"
                            onPress={() => onRegister(email, username, password, password2)}>
                            注册
                        </AuthButton>
                    ) : (
                        <ActivityIndicator animating={true} />
                    )}
                </Spacer>
            </AccountContainer>
            <Spacer size="large">
                <AuthButton mode="contained" onPress={() => navigation.goBack()}>
                    返回
                </AuthButton>
            </Spacer>
        </AccountBackground>
    );
};

import React from 'react';
import styled from 'styled-components/native';
import { TextInput, Text } from 'react-native'; // 确保导入 Text 组件

// 定义样式化的 TextInput
const StyledTextInput = styled(TextInput)`
    width: 200px;
    background-color: #c6daf7;
    padding: 10px;
    border-radius: 5px;
    border-width: 1px;
    border-color: ${props => props.error ? 'red' : 'transparent'}; // 根据是否有错误改变边框颜色
`;

// 定义错误文本的样式
const ErrorText = styled(Text)`
    color: red;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 5px; // 调整位置
`;

// 增强 AuthInput 组件
export const AuthInput = ({ error, ...props }) => {
    return (
        <>
            {/* 传递 error prop 给 StyledTextInput，以便根据错误状态改变样式 */}
            <StyledTextInput {...props} error={!!error} /> 
            {/* 如果存在错误信息，则渲染错误文本 */}
            {error && <ErrorText>{error}</ErrorText>}
        </>
    );
};