Javascript 反应本机Firebase电话身份验证问题

我已经与RN expo phone auth进行了数周的斗争，但似乎没有任何效果，有人可以共享工作代码吗？

我找到了RN expo firebase auth的解决方案。这是一个完整的工作代码，请记住安装这些依赖项

warn add expo firebase recaptcha

和

expo install firebase

。注意

f

是我的配置文件夹中的

firebase

。祝你好运，我希望这对别人有帮助。：）

import React，{useRef，useState}来自“React”；
从“react native”导入{样式表、文本、视图、TouchableOpacity、TextInput}；
从“expo firebase recaptcha”导入{firebase RecaptchaverifierModal}
从“./firebaseConfig/config”导入{f}
导出默认应用=（）=>{
常量[phoneNumber，setPhoneNumber]=使用状态（“”）；
const[code，setCode]=useState（“”）；
const[verificationId，setVerificationId]=useState（）；
const recaptchaVerifier=useRef（）；
const sendVerification=（）=>{
const phoneProvider=新的f.auth.PhoneAuthProvider（）；
电话供应商
.verifyPhoneNumber（phoneNumber，recaptchaVerifier.current）
.然后（设置验证ID）；
};
const confirmCode=（）=>{
const credential=f.auth.PhoneAuthProvider.credential(
验证ID，
代码
);
F
.auth（）
.signiWithCredential（凭证）
。然后（（结果）=>{
控制台日志（结果）；
});
};
返回(
发送验证
发送验证
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
文本输入：{
paddingTop:40，
填充底部：20，
水平方向：20，
尺寸：24，
borderBottomColor:“#7f8c8d33”，
边界宽度：2，
marginBottom:10，
textAlign:'中心'，
},
发送验证：{
填充：20，
背景颜色：“#3498db”，
边界半径：10，
},
发送代码：{
填充：20，
背景颜色：“#333”，
边界半径：10，
},
按钮文字：{
textAlign:'中心'，
颜色：“#fff”，
},
})

我今天也在努力解决同样的问题，但我发现《世博会文件》对我很有帮助（还有一个演示）

这是世博会文件：

---

如果您有关于堆栈溢出的信息要共享，最好的方法是提出一个关于手头问题的问题，然后回答您自己的问题作为正式答案，当对人们有帮助时，可以独立投票并接受。请不要在问题本身中回答您自己的问题。谢谢您：D我将按照您的建议删除帖子并重新发送。似乎我必须发送一篇关于“如何在Stackoverflow上删除帖子”的帖子。：/您也可以编辑您自己的问题，然后回答。

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha'
import { f } from './firebaseConfig/config'


export default App = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [code, setCode] = useState('');
  const [verificationId, setVerificationId] = useState();
  const recaptchaVerifier = useRef();

  const sendVerification = () => {
    const phoneProvider = new f.auth.PhoneAuthProvider();
    phoneProvider
      .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
      .then(setVerificationId);
  };

  const confirmCode = () => {
    const credential = f.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    f
      .auth()
      .signInWithCredential(credential)
      .then((result) => {
        console.log(result);
      });
  };

  return (

      <View style={styles.container}>
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={f.app().options}
        />
        <TextInput
          placeholder="Phone Number"
          onChangeText={setPhoneNumber}
          keyboardType="phone-pad"
          autoCompleteType="tel"
          style={styles.textInput}
        />
        <TouchableOpacity
          style={styles.sendVerification}
          onPress={sendVerification}
        >
          <Text style={styles.buttonText}>Send Verification</Text>
        </TouchableOpacity>
        <TextInput
          placeholder="Confirmation Code"
          onChangeText={setCode}
          keyboardType="number-pad"
          style={styles.textInput}

        />
        <TouchableOpacity
          style={styles.setCode}
          onPress={confirmCode}>
          <Text style={styles.sendVerification}>Send Verification</Text>
        </TouchableOpacity>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
    fontSize: 24,
    borderBottomColor: '#7f8c8d33',
    borderBottomWidth: 2,
    marginBottom: 10,
    textAlign: 'center',
  },
  sendVerification: {
    padding: 20,
    backgroundColor: '#3498db',
    borderRadius: 10,
  },
  sendCode: {
    padding: 20,
    backgroundColor: '#333',
    borderRadius: 10,
  },
  buttonText: {
    textAlign: 'center',
    color: '#fff',
  },
})