使用 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: [, , , , , , , , ],
refreshing: false,
tableData: []
}
}
componentDidMount() {
const tableData = [];
for(let i = ; i < ; i += ) {
const rowData = [];
for(let j = ; j < ; j += ) {
rowData.push(`${i}${j}`);
}
tableData.push(rowData);
}
this.setState({
tableData: tableData
})
}
refresh = () => {
this.setState({
refreshing: true
})
setTimeout(()=>{
this.setState({
refreshing: false
})
},)
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% && {backgroundColor: '#F7F6E7'}]}
textStyle={styles.text}
/>
}}
/>
</Table>
</View>
</ScrollView>
</View>
)
}
//没有数据的时候加载
_noData = () => {
return <Text style={styles.noData}>没有数据</Text>;
}
}
const styles = StyleSheet.create({
container: {
flex: ,
paddingTop: ,
backgroundColor: '#fff'
},
header: {
height: ,
backgroundColor: '#537791'
},
text: {
textAlign: 'center',
fontWeight: ''
},
row: {
height: ,
backgroundColor: '#E7E6E1'
}
});