firebase - 如何在表格中正确对齐显示来自 firebase 的数据。?使用 React Native。?
问题描述
我正在尝试通过对齐的 map 函数在表中显示对象名称和键。但只有对象数据名称对齐显示,对象键值不对齐显示。我需要帮助。!
应用程序.js
import React, { Component } from 'react';
import { Text, View, ImageBackground, StyleSheet, ScrollView } from 'react-native';
import CustomHeader from '../CustomHeader';
import firebase from '../../database/firebase';
import { DataTable } from 'react-native-paper';
var categories = [];
var categories1 = [];
var data;
// var key;
// var data;
var count = 0;
export default class Bus_Schedule extends Component {
constructor(props) {
super(props);
this.state = {
dataArray: {},
arrayList: [],
menu1:[],
menu2: [],
};
}
componentDidMount() {
// firebase.database().ref('Schedule/Route-01/').on('value', querySnapShot => {
// data = querySnapShot.val() ? querySnapShot.val() : {};
// console.log("Data submit")
// let todoItems = {...data};
// console.log(todoItems);
// this.setState({
// dataArray: todoItems,
// });
// });
///
// var data1 = [];
// console.log("letter send");
// firebase.database().ref('Schedule/Route-01/').once("value").then(snapshot => {
// var data1 = Object.keys(snapshot.val());
// console.log(data1);
// })
firebase.database().ref('Scheduleinfo/-Md0XP_If-zG3F3qnNmv/').once('value').then(function(snapshot) {
console.log(" Again");
// this.setState({
// menu1: snapshot.val()
// })
// const categories = []
// var categories1 = []
snapshot.forEach(function(snap) {
const item = snap.val();
categories.push({ key: snap.key, data: snap.val() });
const item1 = snap.key;
categories1.push(item1);
count++;
// Array1 = item;
// console.log(Array1);
// let item1 = snap.key ? snap.key : {};
// Array2 = item1;
});
console.log(count);
/// For object Values
// console.log("Values");
// console.log(categories);
// this.setState( { //PASSING VARIABLE TO STATE
// menu1 :categories
// })
// console.log(this.state.menu1);
/// For object Names
console.log("Names");
console.log(categories1);
this.setState( { //PASSING VARIABLE TO STATE
menu2 :categories1
})
console.log(this.state.menu2);
// if (categories1 === "123")
// {
// console.log("SRK");
// }
// else{
// console.log("No data");
// }
// categories1.map(x => {
// if (x === '123' || x === '456'){
// console.log(x);
// }else{
// console.log("nothing");
// }
// })
/// Use this method to login user ///
/// With State Array ///
const name = "AlFateh";
for(let i =0 ; i< count; i++)
{
if(this.state.menu2[i] == name)
{
console.log(name);
}
// console.log('nothing');
}
}.bind(this));
}
empty()
{
categories1 = [];
categories = [];
}
render() {
let todosKeys = Object.keys(this.state.dataArray);
return (
<View
style={styles.container}>
<CustomHeader title="Bus Schedule" navigation={this.props.navigation} />
<DataTable style={{ top: -12 }}>
<DataTable.Header style={{ backgroundColor: '#F7EA6D' }}>
<DataTable.Title style={{ justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontSize: 20, fontWeight: "bold" }}>Route-1</Text></DataTable.Title>
</DataTable.Header>
<DataTable.Header style={{ backgroundColor: '#F7EA6D' }}>
<DataTable.Title style={{ marginLeft:35 }}><Text style={{ fontSize: 20, fontWeight: "bold" }}>PLACE DEPT.TIME</Text></DataTable.Title>
</DataTable.Header>
{
categories.map(({ key, data }, key1) => (
<View style={{ backgroundColor: "#D1FDFF",}} key={key1} id={key1}>
<DataTable.Row>
<DataTable.Cell style={{ marginLeft: 50, }}>
<Text style={{ fontSize: 15, fontWeight: "bold" }} key={key1} id={key1}>
{key}
</Text>
<View
style={{
alignItems:'center',
justifyContent:'center',
alignSelf:'center',
flexDirection:'column',
}}
key={`key_1`}
id={`key_1`}
>
<Text key={`key_2`} id={`key_2`} style={{paddingLeft: 34, marginLeft: 100, textAlign: 'center', fontSize: 15, fontWeight: "bold"}}>
{data}
</Text>
</View>
</DataTable.Cell>
</DataTable.Row>
</View>
))
}
</DataTable>
{this.empty()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#FEF9E7',
flex: 1,
},
appButtonText: {
fontSize: 15,
color: "#fff",
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase"
}
});
我正在尝试通过对齐的 map 函数在表中显示对象名称和键。但只有对象数据名称对齐显示,对象键值不对齐显示。我需要帮助。!
解决方案
您应该将密钥和数据分开DataTable.Cell
<DataTable.Row>
<DataTable.Cell>{key}</DataTable.Cell>
<DataTable.Cell>{data}</DataTable.Cell>
</DataTable.Row>
对标题做同样的事情
<DataTable.Header>
<DataTable.Title>PLACE</DataTable.Title>
<DataTable.Title>DEPT.TIME</DataTable.Title>
</DataTable.Header>
并在这些组件中修改您的样式
推荐阅读
- c# - 从 ASP.net MVC 控制器中的二进制数据下载图像时返回文件不起作用
- android - 无法在 Flutter 中使用 Hive 插件
- javascript - ngModel如何以角度访问错误属性?
- excel - 为什么这个宏需要 40 秒才能运行?
- aws-lambda - 使用 boto3 过滤 cloudwatch 日志组
- javascript - 反应数组的条件排序
- remote-server - 是否有任何选项可以通过 rundeck 本身杀死在远程机器上运行更长时间的作业?
- http - TCP“连接”是如何维护的,HTTP Keep-Alive 是如何影响它的?
- javascript - Python Selenium - how to click full screen button of a video without a frame
- scala - 基于键合并两列结构数组