React Native (Expo) Firebase Phone Auth with invisible reCap

Question

既然世博会SDK 37 Firebase Phone Auth是受支持，当然reCaptcha也链接到它。不幸的是，据我所知，世博会仅提供了使用模态来显示 reCaptcha 的可能性。

由于这种模态看起来不是很好，有没有办法使 reCaptcha 不可见？或者是否可以在模态之外显示它？

Answer 1

要使 reCaptcha 不可见，您可以按如下方式传递 prop：

<FirebaseRecaptchaVerifierModal
ref={/* store ref for later use */}
firebaseConfig={/* firebase web config */}
attemptInvisibleVerification={true | false /* experimental - this will make it invisible */}
/>

您可以从 https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/了解更多信息

Answer 2

您可以创建自己的<Modal>或内联显示<FirebaseRecaptcha>组件。

以下是世博会文件所说的：

<FirebaseRecaptchaVerifierModal>的自定义选项有限。 您无法更改其外观，但可以更改标题和 取消标签。

<FirebaseRecaptchaVerifierModal
ref={...}
firebaseConfig={...}
title='Prove you are human!'
cancelLabel='Close'
/>

如果你想要一个自定义的外观和感觉，那么创建你自己的<Modal>或 在屏幕中内联显示<FirebaseRecaptcha>组件。做 确保为小部件保留足够的空间，因为它不仅可以显示 紧凑的"我不是机器人"UI，还有完整的验证UI 要求用户选择图像。