嘗試使Firebase電子郵件/密碼身份驗證與React Native配合使用

Question

因此，我正在嘗試使用React Native獲取Firebase電子郵件&密碼身份驗證。

手動實現我上申請一個用戶通過插入

auth.createUserWithEmailAndPassword('name@email.com','password') 

然後連接工作。

但是我很難從{this.state.email} & {this.state.password}將正確的格式寫入函數中。我大多會得到：需要2個參數，只有1或沒有錯誤。

也許代碼設置爲輸入字段是錯誤的。網絡上的大多數其他示例使用舊示例

任何有此經驗的人都可以在此幫忙嗎？提前致謝。

額外的信息：這將導致一個語法錯誤

auth.createUserWithEmailAndPassword(
      {this.state.email}, 
      {this.state.password} 

     ) 

代碼：

'use strict'; 
    import React, { Component } from 'react'; 
    import { 
     Text, 
     TextInput, 
     View 
    } from 'react-native'; 

import Button from '../components/Button'; 
import StatusBar from '../components/StatusBar'; 
import Login from './Login'; 
import styles from '../styles.js'; 

var firebaseConfig = { 
    apiKey: "##", 
    authDomain: "##", 
    databaseURL: "##", 
    storageBucket: "##", 
}; 
const firebaseApp = firebase.initializeApp(firebaseConfig, 'AppB'); 
firebase.database.enableLogging(true); 
const auth = firebaseApp.auth(); 

class Signup extends Component { 

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

    signup(email, password){ 
    this.setState({ 
     loaded: false, 
    }); 

    auth.createUserWithEmailAndPassword(
     '{this.state.email}', 
     '{this.state.password}' 

    ).then((data) => { 
      if (this.props.onSignupSuccess) { 
       this.props.onSignupSuccess(data) 
      } 
     }) 
     .catch((error) => { 
      var errorCode = error.code; 
      var errorMessage = error.message; 

      if (this.props.onLoginError) { 
       this.props.onLoginError(error.code, error.message) 
      } 
     }); 
     this.setState({ 
     email: '', 
     password: '', 
     loaded: true 
     }); 
    } 

    goToLogin(){ 
    this.props.navigator.push({ 
     component: Login 
    }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <StatusBar title="Signup" loaded={this.state.loaded} /> 
     <View style={styles.body}> 

      <TextInput 
       style={styles.textinput} 
       onChangeText={(text) => this.setState({email: text})} 
       value={this.state.email} 
      placeholder={"Email Address"} 
      /> 
      <TextInput 
      style={styles.textinput} 
      onChangeText={(text) => this.setState({password: text})} 
      value={this.state.password} 
      secureTextEntry={true} 
      placeholder={"Password"} 
      /> 
      <Button 
      text="Signup" 
      onpress={this.signup.bind(this)} 
      button_styles={styles.primary_button} 
      button_text_styles={styles.primary_button_text} /> 

      <Button 
      text="Got an Account?" 
      onpress={this.goToLogin.bind(this)} 
      button_styles={styles.transparent_button} 
      button_text_styles={styles.transparent_button_text} /> 
     </View> 
     </View> 
    ); 
    } 
} 

module.exports = Signup; 

Answer 1

在這裏你去...

import React, { 
 
    Component 
 
} 
 
from 'react'; 
 

 
import { 
 
    View, 
 
    Text, 
 
    TextInput, 
 
    TouchableOpacity 
 
} 
 
from 'react-native'; 
 

 
import { 
 
    Button 
 
} 
 
from '../common/button'; 
 
import styles from '../../styles'; 
 
import { 
 
    firebaseApp 
 
} 
 
from './authentication'; 
 

 
export class signIn extends Component { 
 

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

 
    componentDidMount() { 
 
    firebaseApp.auth().onAuthStateChanged(firebaseUser => { 
 
     if (firebaseUser) { 
 
     this.setState({ 
 
      authUser: firebaseUser 
 
     }); 
 
     this.setState({ 
 
      toast: `Logged in as ${this.state.authUser.email}` 
 
     }); 
 
     console.log(this.state.authUser); 
 
     this.props.navigator.push({ 
 
      screen: 'home' 
 
     }); 
 
     } else { 
 
     this.setState({ 
 
      toast: 'Logged Out' 
 
     }); 
 
     } 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (< View style = { 
 
     styles.container 
 
     } > 
 
     <Text> Sign In < /Text> 
 

 
     <Text style={styles.label}>Username:</Text > 
 
     < TextInput style = { 
 
     styles.input 
 
     } 
 
     value = { 
 
     this.state.email 
 
     } 
 
     onChangeText = { 
 
     (text) => this.setState({ 
 
      email: text 
 
     }) 
 
     } 
 
     placeholder = "Email"/> 
 

 
     < Text style = { 
 
     styles.label 
 
     } > Password: < /Text> 
 
     <TextInput 
 
     style={styles.input} 
 
     secureTextEntry={true} 
 
     value={this.state.password} 
 
     onChangeText={(text) => this.setState({password: text})} 
 
     placeholder="Password" 
 
     /> 
 

 
     < Button text = { 
 
     'Sign In' 
 
     } 
 
     onPress = { 
 
     () => this.signIn() 
 
     } 
 
     /> 
 

 
     <View style={styles.links}> 
 
      <TouchableOpacity> 
 
      <Text style={[styles.link,styles.linkPadding]}> 
 
       Forgot Password? 
 
      </Text > 
 
     < /TouchableOpacity> 
 

 
      <TouchableOpacity onPress={() => this.props.navigator.push({ screen: 'signUp' })}> 
 
      <Text style={styles.link}> 
 
       Sign Up 
 
      </Text > 
 
     < /TouchableOpacity> 
 

 
     </View > 
 

 
     < Text style = { 
 
     styles.error 
 
     } > { 
 
     this.state.toast 
 
     } < /Text> 
 

 
     </View > 
 
    ) 
 
    } 
 
    signIn() { 
 
    let { 
 
     email, password 
 
    } = this.state; 
 
    firebaseApp.auth().signInWithEmailAndPassword(email, password) 
 
     .catch(error => { 
 
     this.setState({ 
 
      toast: error.message 
 
     }); 
 
     }); 
 
    } 
 
}

和你authentication.js文件/組件應該是這樣的：

import * as firebase from 'firebase'; 
 

 
const config = { 
 
apiKey: "", 
 
authDomain: "", 
 
databaseURL: "", 
 
storageBucket: "", 
 
    }; 
 

 
export const firebaseApp = firebase.initializeApp(config);