暫無描述

RegisterScreen.js 2.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import React, { Component } from "react";
  2. import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Text, View } from "react-native";
  3. import firebase from "firebase";
  4. import { Picker } from "@react-native-picker/picker";
  5. import { styles } from "../config/styles";
  6. import CustomButton from "../components/CustomButton";
  7. export default class RegisterScreen extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. username: '',
  12. email: '',
  13. password: '',
  14. interpreter: false,
  15. };
  16. this.onRegister = this.onRegister.bind(this)
  17. };
  18. onRegister() {
  19. const { username, email, password, interpreter } = this.state;
  20. firebase.auth().createUserWithEmailAndPassword(email, password)
  21. .then((result) => {
  22. firebase.firestore().collection("Users")
  23. .doc(firebase.auth().currentUser.uid)
  24. .set({
  25. username,
  26. email,
  27. interpreter,
  28. })
  29. console.log(result)
  30. })
  31. .catch((error) => {
  32. console.log(error)
  33. })
  34. }
  35. render() {
  36. return (
  37. <TouchableWithoutFeedback style={styles.regcontainer} onPress={Keyboard.dismiss} accessible={false}>
  38. <ImageBackground style={styles.regcontainer} source={require('../assets/yellow-white.jpg')}>
  39. <TextInput style={styles.regtxtfield} placeholder="Userame" onChangeText={(username) => this.setState({ username })}/>
  40. <TextInput style={styles.regtxtfield} placeholder="Email" onChangeText={(email) => this.setState({ email })}/>
  41. <TextInput style={styles.regtxtfield} placeholder="Password" onChangeText={(password) => this.setState({ password })} secureTextEntry={ true }/>
  42. <Text style={styles.qsttxt}>Are you an interpreter?</Text>
  43. <Picker style={styles.picker} selectedValue={this.state.interpreter} onValueChange={(itemValue,itemIndex) => this.setState({interpreter: itemValue})}>
  44. <Picker.Item label="Yes" value={true}/>
  45. <Picker.Item label="No" value={false}/>
  46. </Picker>
  47. <CustomButton marginTop={50} title="Register" onPress={() => this.onRegister()}/>
  48. </ImageBackground>
  49. </TouchableWithoutFeedback>
  50. );
  51. }
  52. }