使用react-native将textipnput数据保存到Firebase的移动应用程序

时间:2019-03-16 07:05:14

标签: firebase react-native firebase-realtime-database firebase-authentication

我已经尝试将表单值保存到Firebase已有一段时间了,但是没有成功。请如果可以帮助,请帮助。这是我到目前为止所做的。

// SignUp.js
import firebase from '@firebase/app';
import '@firebase/auth';
import "@firebase/database";
//import {app,db} from '../config';
import { db } from '../config';
import React, { Component } from 'react';  
import {Alert, StyleSheet, Text, TextInput, View, Button } from 'react-native';

let addItem = (Name,Password,Email) => {  
      db.ref('/items').push({
        name: Name,
        password:Password,
        email:Email
      });
    };

export default class SignUp extends Component {
  state = { 
            email: '', 
            password: '', 
            name:'',
            errorMessage: null 
          };


  handleSubmit = () => {
    addItem(this.state.name,
            this.state.password,
            this.state.email
            );
    alert('Item saved successfully');
  };


render() {
    return (
      <View style={styles.container}>
        <Text>Sign Up</Text>
        {this.state.errorMessage &&
          <Text style={{ color: 'red' }}>
            {this.state.errorMessage}
          </Text>}
        <TextInput
          placeholder="Email"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={(email) => this.setState({ email })}
          value={this.state.email}
        />
        <TextInput
          placeholder="Name"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={(name) => this.setState({ name })}
          value={this.state.name}
        />
        <TextInput
          secureTextEntry
          placeholder="Password"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={(password) => this.setState({ password })}
          value={this.state.password}
        />
        <Button title="Sign Up" onPress={this.handleSubmit} />
        <Button
          title="Already have an account? Login"
          onPress={() => this.props.navigation.navigate('Login')}
        />
      </View>
    )
  }
}

我的数据库配置文件正在从另一个配置文件中调用。 我已经确认配置文件和数据库链接,并且该链接正在运行。我在另一个addFile.js上使用了它,并且工作正常。所以请大家,如果有人可以帮助我,我将不胜感激。如果有任何关于使用react-native和firebase解决问题的建议,我将不胜感激。如果Firebase对我而言不是最佳选择(因为我正在开发投资应用程序,那么我想向其他数据库(如mongodb)使用建议以及有关如何入门的参考材料。)

1 个答案:

答案 0 :(得分:2)

最简单的注册方法是使用Firebase身份验证,这使您可以使用Firebase创建用户并安全地存储所有这些数据。您以后总是可以访问它并将其保存在其他位置。 (确保在Firebase身份验证中启用了电子邮件身份验证)

  handleSubmit = () => {
    firebase
  .auth()
  .createUserWithEmailAndPassword(this.state.email, this.state.password)
  .then((user) => {
    if(user.user) {
      user.user.updateProfile({
        displayName: this.state.name
      }).then(() => {
          alert('Item saved successfully');
        })
    }
  })
  .catch(error => this.setState({ errorMessage: error.message }));
};

完成此操作后,您可以稍后按照以下步骤访问用户数据

const user = firebase.auth().currentUser;
var postsRef = ref.child("/items/");
var newPostRef = postsRef.push();
newPostRef.set({
    name: user.displayName,
    email: user.email
});

用户现在将保存您以后需要的所有数据。请注意,密码将被散列,因此您将无法访问该密码,并且永远不要像这样将其保存在数据库中。这就是为什么Firebase限制对其的访问。我为您使用了其中一个示例,您可以在此处找到更多示例。 https://firebase.google.com/docs/database/admin/save-data