无法使用React Native

时间:2019-07-02 08:48:11

标签: react-native

我正在尝试使用Firebase对React Native登录/注册表单进行身份验证,但是它不起作用。任何帮助将不胜感激。

我已将npm更新为最新版本,因为它已为其他人使用,但仍然存在问题。我不断收到“身份验证失败”错误。我已经在Firebase控制台中启用了电子邮件/通过身份验证


文件:app.js

    import firebase from 'firebase';
    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, Button} from 'react-native';


    import LoginCard from './src/components/LoginCard'



    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
      android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });


    export default class App extends Component {
      constructor(props){
        super(props)
        this.state = {
          isLoggedIn:null
        }
        this.renderContent = this.renderContent.bind(this);
      }

      componentWillMount(){
        var firebaseConfig = {
          apiKey: "...",
          authDomain: "...",
          databaseURL: "...",
          projectId: "authentication-...",
          storageBucket: "",
          messagingSenderId: "...",
          appId: "..."
        };
        // Initialize Firebase
        if (!firebase.apps.length) {
          firebase.initializeApp(firebaseConfig);
        }
        firebase.auth().onAuthStateChanged(user => {
          if(user) {
            this.setState({isLoggedIn:true})
          } else{
            this.setState({isLoggedIn:false})
          }
        })
      }
       renderContent(){
        if(!this.state.isLoggedIn){
          return <LoginCard />
        }else{
          return <Button title='Log Out' onPress = {() => firebase.auth().signOut()}></Button>
        }
      }
      render() {
        return (
          <View style={styles.container}>
            <View style = {styles.header}>
              <Text style ={{fontSize:24}}>Auth</Text>
            </View>
            {this.renderContent()}
          </View>
        );
      }
    }

    ========LoginCard.js FILE==========

    import firebase from 'firebase';
    import React ,{Component} from 'react';
    import {Text, TextInput,View,TouchableOpacity,ActivityIndicator } from 'react-native';
    import Spinner from './Spinner';
    import {CirclesLoader,PulseLoader,DotsLoader} from 'react-native-indicator';`

    class LoginCard extends Component {
      constructor(props){
        super(props)
        this.state = {
          email:null,
          password:null,
          error:null,
          loading:false
        }
        this.onButtonPress = this.onButtonPress.bind(this);
        this.buttonOrLoading = this.buttonOrLoading.bind(this);
      }

      onButtonPress()  {
        this.setState({error:null,loading:true})
        const {email, password} = this.state;

        firebase.auth().signInWithEmailAndPassword(email,password)
          .then(() => this.setState({error:null,loading:false}))
          .catch(() => {
            firebase.auth().createUserWithEmailAndPassword(email,password)
            .then(() => this.setState({error:null,loading:false}))
              .catch(() => {
                this.setState({error:'Authentication Failed',loading:false})
              })
          })
      }
      buttonOrLoading(){
        if(this.state.loading){
          return <CirclesLoader />
        }
        else return <TouchableOpacity 
        onPress = {this.onButtonPress}
        style = {styles.btn}>
        <Text style = {{fontSize:18}}>Login</Text>
        </TouchableOpacity >
      }
      render(){
        return (
          <View style = {styles.card}>
            <TextInput 
            style = {styles.inputField} 
            placeholder='Email' 
            onChangeText = {email => this.setState({email})}
            value = {this.state.email}
            autoCorrect = {false}/>

            <TextInput 
            style = {styles.inputField} 
            placeholder='Password'
            onChangeText = {password => this.setState({password})}
            value = {this.state.password}
            autoCorrect = {false}
            secureTextEntry = {true}/>

            <Text style= 
     {{color:'red',fontSize:12,alignSelf:'center',margin:5}}>
              {this.state.error}
            </Text>

            {this.buttonOrLoading()}
          </View>`
        );
      }
    }; 

如果以前从未使用过电子邮件,则应该使用“登录”按钮创建一个新用户,但是我认为'createUserWithEmailAndPassword'方法没有这样做。

0 个答案:

没有答案