嘗試讓 Firebase 電子郵件/密碼身份驗證與 React Native 一起使用

Question

所以我試圖讓 Firebase 電子郵件和密碼身份驗證與 React Native 一起使用。

我手動實現了通過插入來注冊用戶

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);