我正在尝试使用firebase在我的应用程序中使用电话号码登录,但我遇到了登录过程的问题.我无法使用firebase中的电话号码登录,但如果我使用电话号码注册并重定向到主页,则它正常工作.我
这是我的代码:
renderLoginButton() {
if (this.props.loading) {
return (
<Spinner size="large" />
);
}
return (
<Button
style={{ alignSelf: 'flex-start' }}
onPress={this.onLoginBtnClicked.bind(this)}
>
Login
</Button>
);
}
onLoginBtnClicked(){
const { contact, password } = this.props;
const error = Validator('password', password) || Validator('contact', contact);
if (error !== null) {
Alert.alert(error);
} else {
console.log('else');
// this.props.loginUser({ contact, password});
const mobileNo = '+91'+contact;
firebase.auth().signInWithPhoneNumber(mobileNo)
.then(confirmResult =>
console.log(confirmResult),
curr = firebase.auth(),
console.log("curr"+JSON.stringify(curr)),
this.setState({ data: curr}),
NavigationService.navigate('Home')
)
.catch(error => console(error.message) );
}
}
CustomDrawerComponent.js
import React, { Component } from 'react';
import { View, Image, Text } from 'react-native';
import { DrawerItems } from 'react-navigation';
import { connect } from 'react-redux';
import { fetchUserDetails } from '../actions';
class CustomDrawerContentComponent extends Component {
state = {
uri: '',
isfailed: ''
}
componentWillMount() {
this.props.fetchUserDetails();
}
componentWillReceiveProps(nextProps) {
let uri = '';
if (nextProps.ProfilePic !== '') {
uri = nextProps.ProfilePic;
this.setState({ uri, isfailed: false });
} else {
uri = '../images/ic_person_24px.png';
this.setState({ uri, isfailed: true });
}
this.setState({ uri });
}
renderProfileImage() {
if (!this.state.isfailed) {
return (
<Image
style={styles.profileImageStyle}
source={{ uri: (this.state.uri) }}
/>
);
}
return (
<Image
style={styles.profileImageStyle}
source={require('../images/ic_person_24px.png')}
/>
);
}
render() {
console.log('Profile Pic :: ', this.props.ProfilePic);
return (
<View style={styles.container}>
{this.renderProfileImage()}
<Text style={styles.textStyle}>
{this.props.name} - {this.props.category}
</Text>
<DrawerItems {...this.props} />
</View>
);
}
}
const styles = {
container: {
flex: 1,
paddingLeft: 10
},
textStyle: {
fontSize: 14,
textAlign: 'left',
color: '#000000'
},
profileImageStyle: {
alignSelf: 'flex-start',
marginTop: 16,
padding: 10,
width: 40,
height: 40,
borderRadius: 75
}
};
const mapStateToProps = state => {
const { userprofile } = state;
return userprofile;
};
export default connect(mapStateToProps, { fetchUserDetails })(CustomDrawerContentComponent);
调用堆栈:
为什么用户返回未定义(甚至为null)?你知道有一个登录用户,你刚刚登录,哎呀,你甚至可以在chrome dev工具中看到用户对象.
那么为什么它还在返回undefined?有一个直接的答案.
在准备好使用该对象之前,您将获取用户对象.
现在,由于几个不同的原因,这可能会发生,但如果您遵循这两个“规则”,您将不会再次看到该错误.
规则#1:将其移出构造函数()
当你有类似的东西:
constructor(){
this.userId = firebase.auth().currentUser.uid
}
超过一半的页面加载时,构造函数将尝试在用户准备好之前获取用户,应用程序阻止它,因为页面未完全加载,因此您将尝试访问uid还没有的财产.
当您的页面完全加载后,您现在可以调用以获取currentUser.uid
规则#2:使它成为一个可观察的
您可以采用另一种方法,即我们之前的Firebase调用:firebase.auth().currentUser是同步的.我们可以通过订阅auth observable来使它异步.
/**
* When the App component mounts, we listen for any authentication
* state changes in Firebase.
* Once subscribed, the 'user' parameter will either be null
* (logged out) or an Object (logged in)
*/
componentDidMount() {
this.authSubscription = firebase.auth().onAuthStateChanged((user) => {
this.setState({
loading: false,
user,
});
});
}
/**
* Don't forget to stop listening for authentication state changes
* when the component unmounts.
*/
componentWillUnmount() {
this.authSubscription();
}
render() {
// The application is initialising
if (this.state.loading) return null;
// The user is an Object, so they're logged in
if (this.state.user) return <LoggedIn />;
// The user is null, so they're logged out
return <LoggedOut />;
}
}
来源文章:Why does Firebase return undefined when fetching the uid?
React Native的一个很好的教程将在这里:Getting started with Firebase Authentication on React Native因为,您的代码没有显示太多,我希望您更新您的问题以显示更多代码,以便我可以查看.
