![](/img/trans.png)
[英]How to properly persist login state using FireBase in React Native EXPO?
[英]Using Firebase to Authenticate login page in a React Native Expo App but have to click the button twice for the full function to execute
我正在尝试使用 firebase 登录,但是当我单击按钮时,我的 function 一直运行到 signInWithEmailAndPassword 部分,但要执行整个 function 并导航到下一个屏幕,我必须再次单击屏幕上不应该的任何位置是这样的。
Objective * Being able to click on the button once when the email and password fields are entered and then navigating to the next screen. I have tried many ways to rewrite my code and the function and even tried the keyboardShouldPersist = "handled" and "always along
使用异步和等待,但到目前为止没有任何帮助。
export default function LoginScreen({navigation}) {
const screen = Dimensions.get("screen");
// console.log(screen);
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [loading, setLoading] = useState(false)
const onFooterLinkPress = () => {
navigation.navigate('RegistrationScreen')
}
const onLoginPress = () => {
setLoading(true)
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then((response) => {
const uid = response.user.uid
const usersRef = firebase.firestore().collection('users')
usersRef
.doc(uid)
.get()
.then(firestoreDocument => {
if (!firestoreDocument.exists) {
alert("User does not exist anymore.")
return;
}
const user = firestoreDocument.data()
console.log(user)
setLoading(false)
navigation.push('HomeScreen', {user})
})
.catch(error => {
alert(error)
});
})
.catch(error => {
alert(error)
})
}
// async const onLoginPress = () => {
// console.log('function has been read')
// setLoading(true)
// await firebase.auth().signInWithEmailAndPassword(email, password)
// .then(() => {
// console.log(Response)
// console.log('inside the then statement now')
// navigation.navigate('HomeScreen')
// })
// .catch(error => {
// alert(error)
// })
// setLoading(false)
// }
// async function onLoginPress() {
// console.log('func has been read')
// setLoading(true)
// await firebase.auth().signInWithEmailAndPassword(email, password).then( () => {
// // const uid = response.user.uid
// // const usersRef = firebase.firestore().collection('users')
// // usersRef.doc().get().then(firestoreDocument => {
// // if (!firestoreDocument.exists) {
// // alert("User does not exist anymore.")
// // return;
// // }
// setLoading(false)
// navigation.navigate('HomeScreen')
// })
// }
return (
<SafeAreaView style={styles.container}>
{/* <ImageBackground source={require('../../../assets/logpic1.png')} style={styles.container}> */}
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%', }}
keyboardShouldPersistTaps= "always"
>
{/* <Image
style={styles.logo}
source={require('../../../assets/icon.png')}
/> */}
<View style={{paddingTop:'108%'}} >
<TextInput
style={styles.input}
placeholder='E-mail'
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder='Password'
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => onLoginPress()}>
<Text style={styles.buttonTitle}>Log In</Text>
<ActivityIndicator size='small' animating={loading} color="#BB2CD9" />
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
</View>
</View>
</KeyboardAwareScrollView>
{/* </ImageBackground> */}
</SafeAreaView>
)
}
可能是您在浏览器中使用远程调试器。
如果您是解决方案非常简单,请关闭此调试器并将应用程序重新加载到模拟器中,它应该会再次运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.