react-native-table-component, react-native 表格

使用 react-native-table-component， 加上 FlatList 组件，实现可以下拉刷新，上拉加载的demo

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  FlatList
} from 'react-native';
import { Table, TableWrapper, Row } from 'react-native-table-component';

export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'],
            widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200],
            refreshing: false,
            tableData: []
        }
    }
    componentDidMount() {
        const tableData = [];
        for(let i = 0; i < 30; i += 1) {
            const rowData = [];
            for(let j = 0; j < 9; j += 1) {
                rowData.push(`${i}${j}`);
            }
            tableData.push(rowData);
        }
        this.setState({
            tableData: tableData
        })
    }
    refresh = () => {
        this.setState({
            refreshing: true
        })
        setTimeout(()=>{
            this.setState({
                refreshing: false
            })
        },3000)
        console.log('刷新视图');
    }
    //分页
    pager = () => {
        
        alert("分页加载数据");
    }
    render() {
        const state = this.state;
        const {
            widthArr,
            tableHead,
            tableData,
            refreshing
        } = this.state
        return(
            <View style={styles.container}>
                <ScrollView horizontal={true}>
                  <View>
                    <Table borderStyle={{borderColor: '#C1C0B9'}}>
                      <Row data={tableHead} widthArr={widthArr} style={styles.header} textStyle={styles.text}/>
                    </Table>
                      <Table style={{borderColor: '#C1C0B9'}}>
                          <FlatList
                            //刷新
                          onRefresh={this.refresh}
                          refreshing = {refreshing}
                          //分页
                          onEndReachedThreshold={0.1}
                          onEndReached={this.pager}
                          //没数据加载
                          ListEmptyComponent = {this._noData}
                          //分割线
                          ItemSeparatorComponent={this._separator}
                          data={ tableData }
                          keyExtractor={(item, index)=>index}
                          renderItem={({item, index}) =>{
                             return     <Row
                                  key={index}
                                  data={item}
                                  widthArr={widthArr}
                                  style={[styles.row, index%2 && {backgroundColor: '#F7F6E7'}]}
                                  textStyle={styles.text}
                                />
                              }}
                        />
                      </Table>
                  </View>
                </ScrollView>
             </View>
        )
    }
    //没有数据的时候加载
    _noData = () => {
        return <Text style={styles.noData}>没有数据</Text>;
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 30,
        backgroundColor: '#fff'
    },
    header: {
        height: 50,
        backgroundColor: '#537791'
    },
    text: {
        textAlign: 'center',
        fontWeight: '100'
    },
    row: {
        height: 40,
        backgroundColor: '#E7E6E1'
    }
});