使用Expo集成Firebase Auth SDK9时遇auth/invalid-email错误求助

核心问题：TextInput事件处理错误 #

你的SignIn.js中，TextInput使用了onChange属性，但React Native的TextInput获取输入内容需用onChangeText。onChange返回的是事件对象而非输入文本，这导致email和password状态存储的是事件对象，而非实际输入的邮箱字符串，Firebase因此判定为无效邮箱格式。

修复步骤 #

修改SignIn.js中的两个TextInput组件，将onChange替换为onChangeText，同时优化布局和输入体验：

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebaseConfig";


export default function Home() {

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    let signIn = () => {
        // 提前校验邮箱格式，减少无效请求
        if (!email.includes('@') || !email.includes('.')) {
            alert('请输入有效的邮箱地址');
            return;
        }
        signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                const user = userCredential.user;
                console.log(user);
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log(errorCode, errorMessage);
                alert(errorMessage);
            });
    }

    return (
        <View style={tw`flex-1 justify-center items-center`}>
            <TextInput
                style={tw`pl-4 h-12 w-80 border-black border-2 rounded-xl`}
                placeholder="Email"
                onChangeText={text => setEmail(text)}
                value={email}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                style={tw`mt-4 pl-4 h-12 w-80 border-black  border-2 rounded-xl`} 
                placeholder="Password"
                onChangeText={text => setPassword(text)}
                value={password}
                secureTextEntry={true}
                autoCapitalize="none"
            />
            <Button title="Sign In" onPress={signIn} style={tw`mt-6`} />
        </View>
    );
}

额外检查项 #

• 输入校验：在调用Firebase接口前添加邮箱格式校验，提前拦截无效输入。
• 布局合理性：用View包裹所有元素，调整按钮位置到输入框下方，符合用户操作习惯。
• Firebase配置二次确认：确保authDomain与Firebase控制台中项目的认证域名完全一致。

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