React Native + Firebase Email SignUp

使用 React Native + Firebase 製作 Email 註冊模組

學習前

1:請安裝好 native react 開發環境,
2:使用新版 firebase


假設 Firebase 與 Native react已備妥~

一. 開啟 firebase

進入Authentication > 登入方式 > 啟用 電子郵件與密碼
這部分需開啟才能使用email做註冊與登入溝通協定

二.在你的native安裝firebase

AppledeMacBook:Apple$ npm install firebase

三.在你的專案引用firebase

AppledeMacBook:Apple$ import * as firebase from 'firebase'

四.開始製作註冊模組(signup.js)

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

import css from '../css';
import * as firebase from 'firebase';

const config = {

apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
firebase.initializeApp(config);


export default class Signup extends Component {
  constructor(props) {
    super(props);
      this.state = {
         email: '',
         password: ''
      };

}
  signup() {
    firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(() => {
      alert('註冊完成 系統將為你導入')
    }).catch((error) => {
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(this.state.email + '註冊失敗' + errorMessage)
    })
  }
  render() {
    return(
      <View style={css.container}>
       <Text>sign</Text>
       <View>
        <TextInput
          style={css.textinput}
          onChangeText={(text) => this.setState({email: text})}
          value={this.state.email}
          placeholder={"email"}
        />
        <TextInput
          style={css.textinput}
          onChangeText={(text) => this.setState({password: text})}
          value={this.state.password}
          secureTextEntry={true}
          placeholder={"password"}
        />
        <TouchableOpacity onPress={this.signup.bind(this)}>
         <Text>Enter</Text>
        </TouchableOpacity>
       </View>
      </View>
    )
  };
}

五.註冊功能完成~會引用模組嗎?

若對於引用模組有問題 請參閱 Native React 模組引用說明

六.可以註冊了

功能執行都順利的話,
直接就能實現註冊並且將資料寫入firebase 裡面

七.語法說明

1.import React, {Component} from 'react'; // react native 最新版本規則.把Component 改為react api

2.import {
  View,
  Text,
  TextInput,
  TouchableOpacity
} from 'react-native'; // 引用react-native api 內的模組



3.constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: ''
    };
  }
// native 有兩種數據傳送的方法~一個是props(繼承父節點數據), state(是為可變更異動的數據傳遞)

如果將this.state內的數值改成如下~
    this.state = {
      email: '請輸入mail',
      password: '請輸入密碼'
    };

這樣TextInput 就不必給 placeholder~取而代之的是 this.state.email與 this.state.password的值..


4.    <TextInput
          style={css.textinput}
          onChangeText={(text) => this.setState({email: text})}
          value={this.state.email}
          placeholder={"email"}
        />

// 熟悉html的朋友看起來是不是覺得很像 input?
他就是文字輸入的input, 取名 TextInput更直覺~

onChangeText這方法實在很棒~
當你在輸入框裡面輸入異動時..就會把輸入的值改變到指定的欄位~
有點類似動態監聽的概念~

 這句的意思是..當此輸入框內的文字改變時~就將改變的值寫入this.state.email~
搭配placeholder 就能實現輸入立即取代文字內容的效果了~


5.
        <TouchableOpacity onPress={this.signup.bind(this)}>
         <Text>Enter</Text>
        </TouchableOpacity>

TouchableOpacity 與 TouchableHighlight 其實是類似的原件~
只是前者直接有了點擊後有透明度變化的效果~

這邊的用法是 當你點擊了此按鈕~就執行signup這個事件


6.
  signup() {
    firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(() => {
      alert('註冊完成 系統將為你導入')
    }).catch((error) => {
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(this.state.email + '註冊失敗' + errorMessage)
    })
  }

此function使用了firebase api規則~

很直覺的命令~使用email與密碼來創造一個user

firebase.auth().createUserWithEmailAndPassword()

這裡給他餵入的資料傳遞~

this.state.email

this.state.password

餵入成功後 .then(() => {}) 彈出成功訊息

出現錯誤時使用.catch(() => {}) 顯示錯誤資訊