从React Native firebase检索数据并以表格式显示

Question

我是React Native的新手，我正在构建一个Managment System App，我已经从react native检索了我的数据，但是我想以表格式显示数据，但是问题是，获取的数据要么显示在简单的视图，但是即使我尝试使用“ tableview”，也不能采用表格格式，但是只要我使用tableview检索它，它就会显示为空。

这是我的ViewDept类，主要从firebase中获取值：

import React,{Component} from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import {db} from '../config/db';
import {deptref} from './dbServices';
import ItemComponent from './ItemComponent';
export default class ViewDept extends Component{
  constructor(props){
    super(props)
    this.state={

      departments:[
        []
      ]
    }
  }
  componentDidMount() {
  let currentComponent = this;

    deptref.on("value", function(snapshot) {
      console.log(snapshot.val());
      let data = snapshot.val();
      let departments = Object.values(data);
      currentComponent.setState({departments});
    });
  }
 listenForItems=(deptref) => {
    deptref.on("value", function(snapshot) {
      console.log(snapshot.val());
      let data = snapshot.val();
      let departments = Object.values(data);
      this.departments=departments;
    });
  }
render() {
    return (
      <View >

        {
          this.state.departments.length > 0
                    ? <ItemComponent tableData={this.state.departments}  />
                    : <Text>No items</Text>
        }


      </View>
    );
  }

}

})

这是我的表格视图，实际上不起作用

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
 import PropTypes from 'prop-types';
export default class ItemComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
      tableData: [

      ]
    }
  }
  static propTypes = {
      items: PropTypes.array.isRequired
  };

  _alertIndex(index) {
    Alert.alert(`This is row ${index + 1}`);
  }

  render() {
    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Table borderStyle={{borderColor: 'transparent'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          {
            state.tableData.map((rowData, index) => (
             <TableWrapper key={index} style={styles.row}>
                {
                  rowData.map((cellData, cellIndex) => (
                    <Cell key={cellIndex} data={cellIndex === 5 ? element(cellData, index) : cellData} textStyle={styles.text}/>
                  ))
                }
              </TableWrapper>
            ))
          }
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#808B97' },
  text: { margin: 6 },
  row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
  btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },
  btnText: { textAlign: 'center', color: '#fff' }
});