如何使用expo-firebase-reacaptcha？

Question

Expo最近发布了expo-firebase-recaptcha库，我正在尝试在我的应用程序中实现它。recaptcha成功发生，以测试我是否是机器人，但是我没有收到带有验证码的文本消息。我做错了什么？任何帮助都将不胜感激。

下面是我的代码片段

    import * as firebase from "firebase/app";
    import "firebase/auth";
    import {
      FirebaseRecaptchaVerifierModal,
      FirebaseAuthApplicationVerifier
    } from "expo-firebase-recaptcha";


    var config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };
      if (!firebase.apps.length) {
      firebase.initializeApp(config);
      }
    function LoginScreen() {
    const recaptchaVerifier = React.createRef();

    async onSendOtp(){
        if(this.state.phone!="")
        {
          try{
              this.setState({Otp:!this.state.Otp})
              var phoneNumber = this.state.phone;
              console.log("Phone"+phoneNumber);
              const phoneProvider = new firebase.auth.PhoneAuthProvider();
              const verificationid = await phoneProvider.verifyPhoneNumber(
                phoneNumber,
                recaptchaVerifier.current
              );
              this.setState({
                verificationId:verificationid
              })
              console.log("Message sent"+this.state.verificationId);
          }catch(err){
            console.log("Error message"+err)
          }
        }
        else
        {
          Alert.alert("Enter phone number");
        }
    }
      return (
          <View style={{ width: "100%", flex: 1, paddingHorizontal: 30 }}>
            <Title>Login</Title>
            <FirebaseRecaptchaVerifierModal
              ref={recaptchaVerifier}
              firebaseConfig={config}
            />
            <View style={styles.inputContainer}>
              <Icon style={styles.inputIcon} name="mobile-phone"/>
              <TextInput style={styles.inputs}
                  placeholder="Phone number"
                  autoCapitalize="none"
                  keyboardType="numeric"
                  underlineColorAndroid='transparent'
                  maxLength={10}
                  onChangeText={(text)=>this.phonenumberchange(text)}/>
            </View>
            <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} onPress={() => this.onSendOtp()}>
              <Text id="sendcode" style={styles.signUpText}>SEND CONFIRMATION CODE</Text>
            </TouchableHighlight>
</View>  );
    }

Answer 1

const  Phoneauthentication=({navigation})=>{
const recaptchaVerifier = useRef(null);
const [phoneNumber, setPhoneNumber] =useState();
const [verificationId, setVerificationId] =useState();
const [verificationCode, setVerificationCode] =useState();
const firebaseConfig = firebaseconfig;
const [message, showMessage] = useState((!firebaseConfig || Platform.OS === 'web')
  ? { text: "To get started, provide a valid firebase config in App.js and open this snack on an iOS or Android device."}
  : undefined);

return (
  <View style={{ padding: 20, marginTop: 50 }}>
    <FirebaseRecaptchaVerifierModal
      ref={recaptchaVerifier}
      firebaseConfig={firebaseConfig}
      style={{ margin:0, left: 0, top:-10, right: 0, bottom: 0 }}
      title="Hello"
    />
    <Text style={{ marginTop: 20 }}>Enter phone number</Text>
    <TextInput
      style={{ marginVertical: 10, fontSize: 17 }}
      placeholder="+92 331 969 9999"
      autoFocus
      autoCompleteType="tel"
      keyboardType="phone-pad"
      textContentType="telephoneNumber"
      onChangeText={(phoneNumber) => setPhoneNumber(phoneNumber)}
    />
    <Button
      title="Send Verification Code"
      disabled={!phoneNumber}
      onPress={async () => {
        // The FirebaseRecaptchaVerifierModal ref implements the
        // FirebaseAuthApplicationVerifier interface and can be
        // passed directly to `verifyPhoneNumber`.
        try {
          const phoneProvider = new firebase.auth.PhoneAuthProvider();
          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: ${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 = firebase.auth.PhoneAuthProvider.credential(
            verificationId,
            verificationCode
          );
          await firebase.auth().signInWithCredential(credential);
          showMessage({text:'Phone authentication successful ?'||navigation.goback()});
        } catch (err) {
          showMessage({ text: `Error: ${err.message}`, color: "red",marginTop:220 });
        }
      }}
    />
    {message ? (
      <TouchableOpacity
        style={[StyleSheet.absoluteFill, { backgroundColor: 0xffffffee, justifyContent: "center" }]}
        onPress={() => showMessage(undefined)}>
        <Text style={{color: message.color || "blue", fontSize: 17, textAlign: "center", margin:20, }}>
          {message.text}
        </Text>
      </TouchableOpacity>
    ) : undefined}
  </View>
);

}

导出默认PhoneAuth；