React Native Firebase Phone Auth issues

Question

我已经为 RN expo 电话身份验证苦苦挣扎了几个星期了，似乎没有任何效果，任何人都可以共享工作代码吗？

Answer 1

我今天也在为同样的事情而苦苦挣扎，但我发现这个世博会文档对我非常有帮助(那里还有一个演示(。

这是世博会文档：

• https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/

Answer 2

我已经找到了RN Expo火力基地身份验证的解决方案。这是一个完整的工作代码，请记住yarn add expo-firebase-recaptcha和expo install firebase安装这些依赖项。请注意，f是我的配置文件夹中的firebase。祝你好运，我希望这对某人有所帮助。:)

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',
},
})