react-native-sf-flatlist
v1.0.17
Published
Downloads
3
Readme
react-native-sf-flatlist
支持上拉下拉刷新的FlatList,解决ListEmptyComponent不能居中显示的问题,并且只在第一次数据加载后数据为空时才会显示
安装
- npm install react-native-sf-flatlist
Props
| parameter | type | required | description | default | |:-----|:-----|:-----|:-----|:-----| |onBeginRefreshHeader|func|no|开始下拉刷新回调|null| |onBeginRefreshFooter|func|no|开始上拉刷新回调|null| |onEndShouldRate|number|no|上拉开始刷新的距离(0-1.0)|0.2| |refreshHeaderTitle|string|no|上拉刷新标题|null| |refreshHeaderColor|string|no|上拉刷新菊花颜色|null| |refreshHeaderBgColor|string|no|上拉刷新背景颜色(仅限Android)|null| |emptyComponent|component|no|空数据时显示组件|null| |emptyDefaultTitle|string|no|emptyComponent为空时默认空数据标题|'没有数据'| |emptyDefaultColor|string|no|emptyComponent为空时默认空数据颜色|'rgba(200,200,200,1)'|
Methods
| Methods | Params | Param Types | description | Example | |:-----|:-----|:-----|:-----|:-----| |beginRefreshHeader|null|null|手动开始下拉刷新|| |endRefreshHeader|null|null|结束下拉刷新(数据更新成功后调用)|| |endRefreshFooter|null|null|结束上拉刷新(数据更新成功后调用)|| |endRefreshNomore|null|null|结束上拉刷新,没有更多数据状态,再次加载不会调用onBeginRefreshFooter(数据更新成功后调用)||
例子
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions
} from 'react-native';
import SFFlatList from "react-native-sf-flatlist"
var width = Dimensions.get('window').width;
export default class App extends Component {
constructor(props){
super(props);
this.state = {
dataSource:[
]
}
}
componentDidMount() {
this.refs.flat.beginRefreshHeader()
}
onBeginRefreshHeader = () => {
setTimeout(()=>{
//测试数据
tmp = [];
for (var i = 0; i < 15; i++){
var data = {name:'标题_'+i,des:'描述描述'};
tmp.push(data);
}
this.setState({
dataSource:tmp
})
//结束下拉刷新
this.refs.flat.endRefreshHeader()
},1000)
}
onBeginRefreshFooter = () => {
setTimeout(()=>{
//测试数据
tmp = [];
for (var i = 0; i < 5; i++){
var data = {name:'标题_'+i,des:'描述描述'};
tmp.push(data);
}
this.setState({
dataSource:this.state.dataSource.concat(tmp)
},()=>{
this.refs.flat.endRefreshFooter()
})
//结束上啦刷新
},2000)
}
_renderItem = ({item}) => {
return(
<View style={{
height:50
}}>
<Text style={{
fontSize:20,
color:'black'
}}>{item.name}</Text>
</View>
)
}
emptyComponent = () => {
return(
<View style={{
width:width,
height:300,
alignItems:'center',
justifyContent:'center'
}}>
<Image style={{
width:100,
height:100
}} source={require('./img/comment.png')}>
</Image>
<Text style={{
color:'rgba(205,205,205,1)',
fontSize:15,
marginTop:20
}}>{'还没有人评论,加油跟帖吧~'}</Text>
</View>
)
}
render() {
return (
<View style={styles.container}>
<View style={{
width:width,
height:60,
alignItems:'center',
backgroundColor:'rgba(33,143,252,1)',
justifyContent:'center'
}}>
<Text style={{
fontSize:16,
color:'white',
marginTop:10
}}>FlatList</Text>
</View>
<SFFlatList
ref = "flat"
onBeginRefreshHeader={this.onBeginRefreshHeader}
onBeginRefreshFooter={this.onBeginRefreshFooter}
emptyComponent={this.emptyComponent()}
data={this.state.dataSource}
renderItem={this._renderItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});