android - 为什么我不能在表中显示 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;
解决方案
推荐阅读
- swift - 如何使用 Swift 在任意位置创建文件?
- tkinter - 我正在尝试用 tkinter 制作一个琐事游戏
- c++ - 假设只有最后一行会有不包含 3 个值的错误,我如何使用流提取运算符读取文件
- java - 使用 Gson/Java 解析 Alpha Vantage API
- c# - 为什么我能够访问一个类,而无需为其指定包含命名空间 - C#
- javascript - 如何使用数据样式名称选择颜色?
- docker - Docker上的“nvidia-smi”不显示“进程”是否正确?
- php - 表单验证Codeigniter 4后无法保留输入值
- javascript - Javascript中的闭包 - 初学者问题
- python - 在python中用1 col创建数据框的差异