Reactjs 在React Native Expo应用程序中使用Firebase对登录页面进行身份验证，但必须单击按钮两次才能执行完整功能

我正在尝试使用firebase登录，但当我单击按钮时 函数运行直到部件使用Email和Password登录，但对于 要执行的整个功能以及要导航到下一个屏幕的功能 必须再次单击屏幕上不应该出现的任何位置 案例

使用async和await，但到目前为止没有任何帮助

导出默认函数LoginScreen（{navigation}）{
常量屏幕=尺寸。获取（“屏幕”）；
//控制台日志（屏幕）；
const[email，setEmail]=useState（“”）
const[password，setPassword]=useState（“”）
常量[loading，setLoading]=useState（false）
常量onFooterLinkPress=（）=>{
导航。导航（'RegistrationScreen'）
}
const onLoginPress=（）=>{
设置加载（真）
火基
.auth（）
.使用电子邮件和密码登录（电子邮件、密码）
。然后（（响应）=>{
const uid=response.user.uid
const usersRef=firebase.firestore（）.collection（'users'）
usersRef
.doc（uid）
.get（）
。然后（firestoreDocument=>{
如果（！firestoreDocument.exists）{
警报（“用户不再存在。”）
返回；
}
const user=firestoreDocument.data（）
console.log（用户）
设置加载（错误）
navigation.push（'主屏幕'，{user}）
})
.catch（错误=>{
警报（错误）
});
})
.catch（错误=>{
警报（错误）
})
}
//async const onLoginPress=（）=>{
//console.log（'函数已被读取'）
//设置加载（真）
//等待firebase.auth（）.signInWithEmailAndPassword（电子邮件，密码）
//.然后（（）=>{
//console.log（响应）
//log（'现在在then语句中'）
//导航。导航（“主屏幕”）
//         })
//.catch（错误=>{
//警报（错误）
//         })
//设置加载（错误）
// }
//异步函数onLoginPress（）{
//console.log（'func已被读取'）
//设置加载（真）
//等待firebase.auth（）.使用email和password（电子邮件，密码）登录。然后（（）=>{
////const uid=response.user.uid
////const usersRef=firebase.firestore（）.collection（'users'））
////usersRef.doc（）.get（）.then（firestoreDocument=>{
////如果（！firestoreDocument.exists）{
////警报（“用户不再存在。”）
////返回；
//         //     }
//设置加载（错误）
//导航。导航（“主屏幕”）
//         })
// }
返回(
{/*  */}
{/*  */}
setEmail（文本）}
值={email}
underlineColorAndroid=“透明”
autoCapitalize=“无”
/>
设置密码（文本）}
值={password}
underlineColorAndroid=“透明”
autoCapitalize=“无”
/>
onLoginPress（）}>
登录
没有帐户？注册吧
{/*  */}
)
}

在浏览器中使用远程调试器的情况下可能会出现这种情况

---

如果您认为解决方案非常简单，请关闭此调试器并将应用程序重新加载到模拟器中，它应该会再次工作。

我在setLoading（true）正上方的onLoginPress函数中有一个console.log（），它会被执行，但firebase.auth（）下方的代码会被执行……仅当我再次单击按钮或再次触摸屏幕上的任何位置时才会执行。如果您可以在浏览器中使用任何远程调试器，请提供帮助，如果是这样，请关闭此调试器并将应用程序重新加载到模拟器中，它应该可以工作。请告诉我这是否解决了问题。这正是问题所在，谢谢！cheersI将添加所有这些内容有关您问题答案的信息，以便社区可以参考。如果有人面临相同的问题，请记住向上投票并接受：）

Objective
* Being able to click on the button once when the email and password fields are entered and then navigating to the next screen.  


I have tried many ways to rewrite my code and the function and even tried the keyboardShouldPersist = "handled" and "always along

export default function LoginScreen({navigation}) {
    const screen = Dimensions.get("screen");
    // console.log(screen);
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [loading, setLoading] = useState(false)
    const onFooterLinkPress = () => {
        navigation.navigate('RegistrationScreen')
    }



    const onLoginPress = () => {
        
      setLoading(true)
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        
                        const user = firestoreDocument.data()
                        console.log(user)
                        setLoading(false)
                        navigation.push('HomeScreen', {user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    // async const onLoginPress = () => {
    //         console.log('function has been read')
    //         setLoading(true)
    //     await firebase.auth().signInWithEmailAndPassword(email, password)
    //         .then(() => {
    //             console.log(Response)
    //             console.log('inside the then statement now')
    //             navigation.navigate('HomeScreen')
    //         })
    //         .catch(error => {
    //             alert(error)
    //         })
    //         setLoading(false)
    // }

    // async function onLoginPress() {
    //     console.log('func has been read')
    //     setLoading(true)
    //     await firebase.auth().signInWithEmailAndPassword(email, password).then( () => {
    //         // const uid = response.user.uid
    //         // const usersRef = firebase.firestore().collection('users')
    //         // usersRef.doc().get().then(firestoreDocument => {
    //         //     if (!firestoreDocument.exists) {
    //         //         alert("User does not exist anymore.")
    //         //         return;
    //         //     }
    //             setLoading(false)
    //             navigation.navigate('HomeScreen')
    //         })
         
    // }


    return (
        <SafeAreaView style={styles.container}>
          {/* <ImageBackground source={require('../../../assets/logpic1.png')} style={styles.container}> */}
            <KeyboardAwareScrollView 
                style={{ flex: 1, width: '100%', }}
                keyboardShouldPersistTaps= "always"
                
                > 
                
                {/* <Image
                    style={styles.logo}
                    source={require('../../../assets/icon.png')}
                /> */}
              
                <View style={{paddingTop:'108%'}} >
                  <TextInput
                      style={styles.input}
                      placeholder='E-mail'
                      placeholderTextColor="#aaaaaa"
                      onChangeText={(text) => setEmail(text)}
                      value={email}
                      underlineColorAndroid="transparent"
                      autoCapitalize="none"
                      

                  />
                  <TextInput
                      style={styles.input}
                      placeholderTextColor="#aaaaaa"
                      secureTextEntry
                      placeholder='Password'
                      onChangeText={(text) => setPassword(text)}
                      value={password}
                      underlineColorAndroid="transparent"
                      autoCapitalize="none"
                      
                  />
                  <TouchableOpacity
                      style={styles.button}
                      onPress={() => onLoginPress()}>
                        
                      <Text style={styles.buttonTitle}>Log In</Text>
                      <ActivityIndicator size='small' animating={loading} color="#BB2CD9" />
                  </TouchableOpacity>
                  <View style={styles.footerView}>
                      <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
                  </View>
                </View>
               
            </KeyboardAwareScrollView>
            {/* </ImageBackground> */}
        </SafeAreaView>
    )
}