首页 > 解决方案 > 为什么我不能在表中显示 firebase firestore 数据?

问题描述

这是我用于表格的包:https ://www.npmjs.com/package/react-native-table-component

如果你知道更好的方法,你能告诉我吗?我想过一些带有样式的水平线,我做了垂直线,但我不知道是否存在这样的东西。我有一些需要在表格中显示的 firebase 数据。它处于“状态”,我希望它显示给用户。通常,根本没有桌子,它可以工作,我可以展示它。我的意思是这个。这个是没有桌子的替代品,效果很好:https ://pastebin.ubuntu.com/p/kpxZmBPtdT/

我的完整代码是这样的:

import React, {Component} from 'react';
import {
Platform,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
Button,
StatusBar,
} from 'react-native';
import firebase from '@react-native-firebase/app'
import firestore from '@react-native-firebase/firestore'
import { format } from "date-fns";
import storage from '@react-native-firebase/storage';
import { Table, Row, Rows } from 'react-native-table-component';
class App extends Component {
 
  constructor(props) {
    super(props);
    this.state = {
      tablo: {
        adSoyad: "",
        yas: "",
        dogumTarihi: "",
        mezunDurumu: "",
        imageUrl: null,
        },
      tableHead: [this.state.tablo.adSoyad, 'Yaş', 'Doğum Tarihi', 'Mezun Durumu'], //since adSoyad field doesn't even show, I didn't write the rest here.
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ]
    }
    this.getUser();
this.subscriber=firestore().collection("tablo").doc
('J6mAav1kjkcjrMupeOqX').onSnapshot(doc => {
this.setState({
tablo: {
adSoyad: doc.data().adSoyad, 
yas: doc.data().yas, 
dogumTarihi: doc.data().dogumTarihi,
mezunDurumu:doc.data().mezunDurumu,
}
}
)
});
  }
  async componentDidMount() {
    var imageRef = firebase.storage().ref('erkek.jpeg');
    var imageUrl = await imageRef.getDownloadURL();
    this.setState({ imageUrl });
  }
  getParsedDate(date){
    date = String(date).split(' ');
    var days = String(date[0]).split('-');
    var hours = String(date[1]).split(':');
    return [parseInt(days[2]), parseInt(days[1])-1, parseInt(days[0]), parseInt(hours[0]), parseInt(hours[1]), parseInt(hours[2])];
  }
  getUser= async() => {
    const userDocument= await firestore().collection("tablo").doc
    ("J6mAav1kjkcjrMupeOqX").get()
    console.log(userDocument) 
    }

  render() {
    //var x=this.state.tablo.adSoyad; I even tried this but didn't work at the table.
    var mezund;
  var date = new String(this.state.tablo.dogumTarihi);
  //some date formatting function. Non important.
  
  //this is about some formatting again.
  //if(this.state.tablo.mezunDurumu==false){mezund="Mezun Değil"}
  //else if(this.state.tablo.mezunDurumu=true){mezund="mezun"}


    const state = this.state;
    
    return (
      
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});
export default App;

标签: androidfirebasereact-nativegoogle-cloud-firestore

解决方案


推荐阅读