javascript - Firebase Phone Auth 与 React Native Expo

Question

所以我一直在尝试在我的 React Native 项目中实现 firebase phone auth。我遵循了下面链接的这个很棒的教程，但遇到了将确认部分更改为不同页面而不是电话号码输入和代码输入都在同一页面上的问题。我收到一条错误消息，指出未找到 verificationId，因为它在上一页中被调用。

Tutorial Link

如果有人能帮忙，那就太好了。

谢谢

  const const Login  = () => {
  const navigation =useNavigation();
  const [phoneNumber, setPhoneNumber] = useState();

  const [verificationId, setVerificationId] = useState(null);
  const recaptchaVerifier = useRef(null);




    const sendVerification  = () => {
       try {
    const phoneProvider = new firebase.auth.PhoneAuthProvider();
    phoneProvider
   .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
   .then(setVerificationId);
     } catch (error) {
   alert(error);
     }
     navigation.navigate('OTPScreen', { verificationId: 
   verificationId})


     };
    return(
   

OTP 屏幕

const const OTPScreen  = () => {

const verificationId = props.route.params.verificationId
 const [code, setCode] = useState('');


const confirmCode = () => {
  const credential = 
  firebase.auth.PhoneAuthProvider.credential(
    verificationId,
    code
  );
  firebase
    .auth()
    .signInWithCredential(credential)
    .then((result) => {
      console.log(result); 
      navigation.navigate('Home')  
        
    });
    

    };
   return(
   

Answer 1

我已经实现了两种可能的解决方案

1. 将您的确认对象作为参数传递给新屏幕，然后将其用于 OTP 确认。
2. 您也可以将此确认对象保存在全局存储中，如 redux。

对于解决方案 1

const [confirm, setConfirm] = useState(null);


  async function signInWithPhoneNumber(phoneNumber) {
    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
    setConfirm(confirmation);
  }

然后导航到您的 otp 屏幕为

navigation.navigate('otpScreen', {confirm: confirm})

在您的 otpScreen 上获取确认对象作为参数(无论您使用什么，都对功能或类组件使用适当的语法)然后

const confirm = props.route.params.confirm

async function confirmCode() {
    try {
      await confirm.confirm(code);
    } catch (error) {
      console.log('Invalid code.');
    }
  }