TypeError：未定义不是构造函数（评估'new _auth.RecaptchaVerifier'）

Question

我正在尝试使用此 link 将 firebase 身份验证添加到我的移动应用程序以支持电话号码身份验证。

我的代码的最小版本是

import React, { useState } from "react";
import {
  Text,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
  TextInput
} from "react-native";
import Firebase from '../config/firebase';
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from "firebase/auth";

const WelcomeScreen = ({ navigation }) => {
  function continueButton() {
    return (
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={async () =>   {  
          console.log("Inside on press");
          window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
            'size': 'invisible',
            'callback': (response) => {
              // reCAPTCHA solved, allow signInWithPhoneNumber.
            }
          }, auth);
          navigation.navigate("Verification", {confirm: confirmation})}}
      >
      </TouchableOpacity>
    );
  }
}

当我点击继续按钮时，continueButton() 函数被触发，导致给定错误

[Unhandled promise rejection: TypeError: undefined is not a constructor (evaluating 'new _auth.RecaptchaVerifier')]
at node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease

我一直试图找出问题的根本原因，但无法找出任何东西。你能帮我解决这个错误吗？

Answer 1

请试试这个

const WelcomeScreen = ({ navigation }) => {
  function continueButton() {
    return (
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={async () =>   {  
          console.log("Inside on press");
          window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
            'size': 'invisible',
            'callback': (response) => {
              return response; // or return some required value here.
            }
          }, auth);
          navigation.navigate("Verification", {confirm: confirmation})}}
      >
      </TouchableOpacity>
    );
  }