使用 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' } });