世博会发生反应-本地应用程序与火力地堡的手机认证工作在网页，上的错误ios崩溃模拟器和没有警告在安卓

我建立一个反应-本地应用程序与博览会，我只有2件，WelcomeScreen和PhoneLoginScreen. 我试图实施火力地堡的电话验证其正常工作的网页，但在模拟器，我得到一个错误 Verifier._reset is not a function. (In 'verifier._reset()', 'verifiier._reset' is undefined 并且，它刚刚崩溃时，我继续按钮导航的PhoneLoginScreen组成部分。 代码如下：

App.js

import React from "react"

import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

import WelcomeScreen from "./components/WelcomeScreen"
import PhoneLoginScreen from "./components/auth/PhoneLoginScreen"

const Stack = createNativeStackNavigator()

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Welcome">
                <Stack.Screen
                    name="Welcome"
                    component={WelcomeScreen}
                    options={{ headerShown: false }}
                />

                <Stack.Screen
                    name="PhoneLogin"
                    component={PhoneLoginScreen}
                    options={{ headerShown: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

WelcomeScreen.js

import React from "react"
import { Text, View, Button } from "react-native"

export default function WelcomeScreen({ navigation }) {
    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Welcome</Text>
            <Button
                title="Continue"
                onPress={() => navigation.navigate("PhoneLogin")}
            />
        </View>
    )
}

PhoneLoginScreen.js

import React, { useRef, useState } from "react"
import { firebaseApp, auth } from "../../firebase"
import {
    Text,
    View,
    TextInput,
    Button,
    StyleSheet,
    TouchableOpacity,
} from "react-native"

import {
    FirebaseRecaptchaVerifierModal,
    FirebaseRecaptchaBanner,
} from "expo-firebase-recaptcha"

import { PhoneAuthProvider, signInWithCredential } from "firebase/auth"

export default function PhoneLoginScreen() {
    const recaptchaVerifier = useRef(null)
    const [message, showMessage] = useState()
    const [phoneNumber, setPhoneNumber] = useState()
    const [verificationId, setVerificationId] = useState()
    const [verificationCode, setVerificationCode] = useState()

    const firebaseConfig = firebaseApp ? firebaseApp.options : undefined
    const attemptInvisibleVerification = true

    return (
        <View style={styles.center}>
            <FirebaseRecaptchaVerifierModal
                ref={recaptchaVerifier}
                firebaseConfig={firebaseConfig}
                attemptInvisibleVerification={attemptInvisibleVerification}
            />

            <Text style={{ marginTop: 20 }}>Enter phone number</Text>

            <TextInput
                style={{ marginVertical: 10, fontSize: 17 }}
                placeholder="+1 999 999 9999"
                autoFocus
                autoCompleteType="tel"
                keyboardType="phone-pad"
                textContentType="telephoneNumber"
                onChangeText={phoneNumber => setPhoneNumber(phoneNumber)}
            />

            <Button
                title="Send Verification Code"
                disabled={!phoneNumber}
                onPress={async () => {
                    try {
                        const phoneProvider = new PhoneAuthProvider(auth)
                        const verificationId =
                            await phoneProvider.verifyPhoneNumber(
                                phoneNumber,
                                recaptchaVerifier.current
                            )
                        setVerificationId(verificationId)
                        showMessage({
                            text: "Verification code has been sent to your phone.",
                        })
                    } catch (err) {
                        showMessage({
                            text: `Error 111: ${err.message}`,
                            color: "red",
                        })
                    }
                }}
            />
            <Text style={{ marginTop: 20 }}>Enter Verification code</Text>
            <TextInput
                style={{ marginVertical: 10, fontSize: 17 }}
                editable={!!verificationId}
                placeholder="123456"
                onChangeText={setVerificationCode}
            />
            <Button
                title="Confirm Verification Code"
                disabled={!verificationId}
                onPress={async () => {
                    try {
                        const credential = PhoneAuthProvider.credential(
                            verificationId,
                            verificationCode
                        )

                        await signInWithCredential(auth, credential)
                        showMessage({
                            text: "Phone authentication successful 


    android    expo    firebase    ios             
    
    

          2021-11-23 22:32:26
        
      
    
    2