Question

我正在尝试使用我的博览会应用程序的电子邮件和密码进行Firebase身份验证。在登录屏幕上，如果我按登录按钮，它会向我显示以上消息：“电子邮件地址格式错误”。注册按钮应该导航到注册页面，但是单击按钮也会给我同样的错误。

export default class App extends React.Component{



  constructor(props)
  { super(props);
    this.state = { isLoadingComplete: false,

  };

  if (!firebase.apps.length){firebase.initializeApp(ApiKeys.FirebaseConfig );}


 }


render()
{
  if (!this.state.isLoadingComplete  && !this.props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={this._loadResourcesAsync}
        onError={this._handleLoadingError}
        onFinish={this._handleFinishLoading}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        {Platform.OS === 'android' && <View style={styles.statusBarUnderlay} />}
        {  <AppNavigator/> }

      </View>
    );
  }

}


_loadResourcesAsync = async () => {
  return Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({

      ...Ionicons.font,

      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
};

_handleLoadingError = error => {

  console.warn(error);
};

_handleFinishLoading = () => {
  this.setState({ isLoadingComplete: true });
};
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#fff',
},
statusBarUnderlay: {
  height: 24,
  backgroundColor: 'rgba(0,0,0,0.2)',
},
});



## login page

export default class LoginScreen extends React.Component {

  constructor(props)
  {
    super(props);
    this.state = {
       email:' ' ,password:' ',
    }
  }

  LoginButtonPress= (email, password) => 
  {
      try{
          firebase.auth().signInWithEmailAndPassword(this.state.email.trim(), this.state.password)
          .then(function(user){console.log(user)

      })
    }
      catch(error){

          Alert.alert(error.message);


      }
  }


  render()
  {

  return (
    <ScrollView style= {styles.container}>
    <Container style ={styles.container}>
         <Content>
           <Form>
              <Item floatingLabel>
                <Label> Email Address</Label>
                <Input autoCorrect = {false} autoCapitalize ="none" 
                onChangeText= {(email) => this.setState({email})}/>
                </Item>

                <Item floatingLabel>
                <Label> Password</Label>
                <Input secureTextEntry ={true} 
                autoCorrect = {false}
                autoCapitalize = "none"

                onChangetext = { (password)=> this.setState({password})}/>


              </Item>
              <Button success info onPress ={()=>this.LoginButtonPress(this.state.email, this.state.password)}>
                <Text> LogIn </Text>
              </Button>

              <Button primary onPress = {()=> this.props.navigation.navigate('SignupScreen')}>
                <Text> First Time User? SignUpNow </Text>
              </Button>
              <Button onPress ={()=> this.props.navigation.navigate('ResetPassScreen')}>
                <Text> Forgot Password? Reset Now </Text>
              </Button>

           </Form>
        </Content>
    </Container>

    </ScrollView>
);
}}


##signup page

export default class SignupScreen extends React.Component{
constructor(props)
{
  super(props);
  this.state = { email: '', 
  password:''
}
}

 SignUpButtonPress= (email, password)=> 
 {

         try {
                firebase.auth().createUserWithEmailAndPassword(this.state.email.trim(), this.state.password)
              }
        catch(error){
                 Alert.alert(error.message);
               }
 }

  render ()
  {
  return (

    <ScrollView>
    <Container style = {styles.container}>
         <Content>
           <Form>
              <Item floatingLabel>
                <Label> Email Address</Label>
                <Input autoCapitalize = "none" autoCorrect ={false} emailonChangeText ={(email)=>this.setState({email})} />
                </Item>

                <Item floatingLabel>
                <Label> Password</Label>
                <Input secureTextEntry = {true} onChangeText ={(password)=>this.setState({password})} />
              </Item>
              <Button success info onPress = {this.SignUpButtonPress(this.state.email, this.state.password)}>
                <Text> SignUp </Text>

              </Button>



           </Form>
        </Content>
    </Container>

    </ScrollView>
);
}

Answer 1

您用于注册按钮的onPress立即在每个渲染器上调用SignupButtonPress回调。更改

// notice that `onPress` is directly calling `this.SignUpButtonPress`
<Button success info onPress = {this.SignUpButtonPress(this.state.email, this.state.password)}>

收件人

<Button success info onPress = {() => {this.SignUpButtonPress(this.state.email, this.state.password);}}>

电子邮件地址格式错误，根本没有输入任何内容

1 个答案: