React Native Firebase 报错auth/invalid-email：邮箱格式异常求助

针对你遇到的部分邮箱触发Email address badly formatted (auth/invalid-email)错误、且控制台显示邮箱值正常的问题，可按以下步骤排查解决：

• 强制清理输入值的首尾空格与隐藏字符
  很多时候用户输入时会不小心带入首尾空格，或输入框混入零宽空格、全角空格等不可见字符，控制台打印时不易察觉。在调用Firebase接口前处理输入：

  // 清理邮箱：移除不可见字符 + 首尾去空格
  const cleanedEmail = email.replace(/[\u200B-\u200D\uFEFF]/g, '').trim();
  

• 前端提前校验邮箱格式
  用标准正则在调用Firebase前做兜底校验，提前拦截不符合格式的输入，避免触发服务端错误：

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(cleanedEmail)) {
    Alert.alert('错误', '请输入正确格式的邮箱');
    return;
  }
  

• 排查特殊邮箱兼容性
  测试带特殊符号的邮箱（如test+tag@example.com、user.name@example.co.uk），确认是否是这类边缘格式触发错误。Firebase支持RFC 5322标准格式的邮箱，若你的邮箱符合标准仍报错，可尝试在Firebase控制台的Auth日志中查看更详细的错误详情。

• 检查Firebase Auth配置
  确认Firebase控制台中「邮箱/密码」登录方式已开启，且未设置域名白名单限制（若开启白名单，不在列表中的域名邮箱会被拦截）。

优化后的SignUp.js示例 #

import { useState, Alert } from 'react';
import { View, TextInput, Button } from 'react-native';
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from '../firebaseConfig';

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

  const handleSignUp = async () => {
    try {
      // 清理邮箱输入
      const cleanedEmail = email.replace(/[\u200B-\u200D\uFEFF]/g, '').trim();
      
      // 前端格式校验
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(cleanedEmail)) {
        Alert.alert('输入错误', '请填写正确格式的邮箱地址');
        return;
      }

      // 调用Firebase注册接口
      await createUserWithEmailAndPassword(auth, cleanedEmail, password);
      Alert.alert('注册成功', '已完成账号创建');
      
      // 注册成功后的跳转或状态更新逻辑
    } catch (error) {
      console.error('注册失败:', error.code, error.message);
      Alert.alert('注册失败', error.message);
    }
  };

  return (
    <View style={{ padding: 20, gap: 15 }}>
      <TextInput
        placeholder="请输入邮箱"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        placeholder="请输入密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="注册" onPress={handleSignUp} />
    </View>
  );
};

export default SignUp;

内容的提问来源于stack exchange，提问作者Araf