如果发送的代码导航到 otp 屏幕，则反应本机 firebase 电话身份验证答案

【问题标题】：React native firebase phone authentication, if code sent navigate to otp screen如果发送的代码导航到 otp 屏幕，则反应本机 firebase 电话身份验证
【发布时间】：2021-10-23 06:39:53
【问题描述】：

我正在使用 react native firebase，如果发送了代码，那么我想导航到 otp 屏幕

但它显示一个警告：

Non-serializable values were found in the navigation state. Check:

OtpVerification > params.confirm._auth._app._deleteApp (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions'

我的代码：

在登录屏幕中：

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

  props.navigation.navigate('OtpVerification', {
    confirm: confirmation,
    phoneNo,
  });
} catch (error) {
  console.log(error);
}

}

在 Otp 屏幕中：

async function confirmCode() {
if (otp) {
  try {
    await confirm.confirm(otp);
    props.navigation.navigate('OnBoarding');
  } catch (error) {
    AlertMsg('Invalid OTP');
  }
} else {
  AlertMsg('Please Enter OTP');
}

}

【问题讨论】：

如果您在 params 中传递类实例、函数等不可序列化的值，则可能会发生这种情况。在这种情况下，React Navigation 会警告您，因为这可能会破坏其他功能，例如状态持久性、深度链接等。

标签： reactjs firebase react-native firebase-authentication react-native-firebase

【解决方案1】：

所以我相信你有 confirmation 变量的相信函数，你可能必须在那里传递一些常量值来处理 firebase 登录的返回。

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

  props.navigation.navigate('OtpVerification', {
    confirm: confirmation,
    phoneNo,
  });
} catch (error) {
  console.log(error);
}

查看此文档 - https://reactnavigation.org/docs/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state

本次展会供您导航-https://snack.expo.dev/vKpugczaG

【讨论】：