我无法打印仅1个用户的信息[REACT NATIVE + Firebase]

时间:2019-02-11 17:00:47

标签: javascript reactjs react-native native

我对本机和Firebase有问题。我在代码上遇到了一些困难,因为在我的应用程序中,我想打印两个屏幕:一个是排行榜,我在其中打印所有用户的所有数据,另一个是排行榜,在UserInfo中,我仅打印以下数据:当前用户,但我什么也没看到,因为我认为currentUID有问题,但是我不知道在哪里。

这里是我代码的直接链接 https://snack.expo.io/@khal_d/proj-p-3

我认为这是关于register.js和User.js的问题

    import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Button,
  Text,
  Image,
  ScrollView,
  Alert,KeyboardAvoidingView,
} from 'react-native';
import { Input, Card, Divider } from 'react-native-elements';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { ImagePicker, Permissions } from 'expo';

import * as firebase from 'firebase';

export default class RegisterScreen extends Component {
  static navigationOptions = {
    title: 'Registration',
  };

  state = {
    isLoading: 'false',
    email: '',
    password: '',
    utente: '',
    name: '',
    surname: '',
    image: '',
    error: '',
    data: [],

  };

   componentDidMount(){
    //leggere array dal db
    const uid = firebase.auth().currentUser.uid;
    console.log("udi: " + uid)
    this.uid= uid;
    if(uid) {
      firebase.database()
      .ref("/users/"+ uid)
      .on("value", snap => {
        let data = [];
        snap.forEach(child => {
          data.push({
            id:child.key,
            ...child.val()
          });
        });
        this.setState({data});
      })
    }
   }

  _signUp = () => {
    this.setState({ isLoading: true });
    firebase
      .auth()
      .createUserWithEmailAndPassword(this.state.email, this.state.password)
      .then(user => {
        this.setState({ isLoading: false });
        this.props.navigation.navigate();
      })
      .catch(error => {
        this.setState({ isLoading: false, error: error.message });
      });

    const uid = firebase.auth().currentUser.uid;

    // console.log("Il current UID dell'utente e':" + currentUID);
    if (uid) {

      // firebase.database().ref(path).on('value', snap => console.log(snap.val()))

      const users = {
        email: this.state.email,
        surname: this.state.surname,
        name: this.state.name,
        image: this.state.image,
      };
      firebase
        .database()
        .ref( "users/")
        .push(users);
    }
  };

  _scrollToInput(reactNode: any) {
    // Add a 'scroll' ref to your ScrollView
    this.scroll.props.scrollToFocusedInput(reactNode);
  }

  render() {
    let { image } = this.state;

    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
       <ScrollView style={{flex: 1}}>

          <Card>
            <Button
              title="Pick an image from PhotooGallery"
              onPress={() => {
                console.log('Pick image');
              }}
            />

            <Image
              source={{ uri: image }}
              style={{ width: 200, height: 200 }}
            />
          </Card>
          <Card>
            <Input
              label="E-Mail"
              placeholder="enter a valid email"
              onChangeText={text => this.setState({ email: text })}
            />

            <Input
              label="Name"
              placeholder="enter your name"
              onChangeText={text => this.setState({ name: text })}
            />

            <Input
              label="Surname"
              placeholder="enter your surname"
              onChangeText={text => this.setState({ surname: text })}
            />

            <Input
              secureTextEntry
              label="password"
              placeholder="your password"
              onChangeText={text => this.setState({ password: text })}
            />
          </Card>

          <Card>
            <Button onPress={this._signUp} title="Register" color="#640584" />
          </Card>
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  });

这是用户

import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, ScrollView } from 'react-native';

import { Input, Card, ListItem} from 'react-native-elements';

import * as firebase from 'firebase';


export default class User extends Component {
   static navigationOptions = {
    title: 'UserInfo',
  };

  state = {
    data: [],
  };

  // Controllare qui
  componentDidMount(){
    //leggere array dal db
    const currentUID = firebase.auth().currentUser.uid;
    const path ="/users/" + currentUID;
    const users = firebase.database().ref(path);
    users.on("value", snap => {
      console.log("log di snap" + snap);
      //ciclo
      var elenco = [];
      snap.forEach(child => {
        elenco.push({
          name: child.val().name,
          surname: child.val().surname,
          email: child.val().email,
          image: child.val().image,
        })
      });

      console.log("altro log finale" + elenco);
      this.setState({data:elenco})
    });

  }
 render() {

    return (
      <ScrollView>
      <View>
        <Card> 

    { this.state.data && 
    this.state.data.map((l, i) => (
      <ListItem
        key={i}
        leftAvatar={{ source: { uri: l.image } }}
        title={l.name}
        subtitle={l.surname}

      />
    ))
    }

      </Card>
      </View>
      </ScrollView>
    );
  }
}

0 个答案:

没有答案