Question

所以我正在努力获取Firebase Email＆amp;密码验证使用React Native。

手动我通过插入

来实现注册用户

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

然后连接工作。

但是我很难从{this.state.email}获得正确的格式。 {this.state.password}进入函数。我主要得到：需要2个参数，只有1或根本没有错误。

可能输入字段的代码设置错误。 Web上的大多数其他示例都使用旧示例

任何有此经验并可以在这方面提供帮助的人？提前谢谢。

额外信息：这会导致语法错误

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

尝试使用Firebase电子邮件/密码身份验证来使用React Native

1 个答案: