Longlist

基于 FlatList 的长列表组件，支持下拉刷新，上拉加载更多。

Install

npm install beeshell

Usage

import { Longlist } from 'beeshell';

Examples

Code

import { Longlist } from 'beeshell';
class App extends React.Component {
    componentDidMount() {
        this.refreshState(1);
    }
    refreshState = (pageNo) => {
        const params = {
            pageNo: pageNo || 1,
            pagesize: this.state.pagesize,
            id: '123456',
        };
        return this.getList(params).then((resData) => {
            const { data } = resData;
            const list = data.map((item) => {
                return {
                    ...item,
                    label: `${item.label}--pageNo: ${params.pageNo}`,
                };
            });
            this.setState({
                list: (pageNo == 1 ? [] : this.state.list).concat(list),
            });
        });
    }
    render() {
      const { list } = this.state;
      return (
          <Longlist
              data={list}
              renderItem={({item, index}) => {
                  return (<Text>{item.label}</Text>);
              }}
              hasRefreshControl={true}
              onEndReached={this.refreshState}
              onRefresh={this.refreshState}
          />
      );
    }
}

Props