FlatList based on the implementation of the pull up load, pull down refresh

Recently, I have been working on react-Native related projects, and made a pull-up loading and pull-down refresh component according to the requirements

The component content

Import {Results} from; // Import {Results} from'./components/index.js'

class ReFlatList extends Component {
	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {}
	}

	ListEmptyComponent = () => {
		const { data } = this.props
		if (data.error) {
			return <Results type='error' width={size(500)} height={size(200)} />
		}
		if (data.pageNum == 0) {
			return <Results type='reload' width={size(500)} height={size(200)} />
		}
		return <Results type='data' width={size(500)} height={size(200)} />
	}

	ListFooterComponent = () => {
		const { data } = this.props
		if (data.records.length > 0) {
			if (data.records.length < data.total) {
				return (
					<View style={{ padding: 20, }}>
						<ActivityIndicator text="Loading" />
					</View>
				)
			} else {
				return (
					<View style={{ padding: 20, }}>
						<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, textAlign: 'center'</Text> </View>)}}return null
	}

	render() { const { style, flatListStyle, progressBackgroundColor, data, ... props } = this.propsreturn( <View style={{ flex: 1, ... style }}> <FlatList style={{ flex: 1, ... flatListStyle }} keyExtractor={(item, index) => index.toString()} ListEmptyComponent={this.ListEmptyComponent} ListFooterComponent={this.ListFooterComponent} onEndReachedThreshold={.0000001} data={data.records} {... props} /> </View> ) } }Copy the code

use

// ANTD loads import {Tabs, Toast, Portal} from as needed'@ant-design/react-native'; Import {agentGoodsList} from import {agentGoodsList} from'./module/module.js'// Import {RnFlatList} from'./components/index.js'

class AgentGoods extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false// State loading:falseTotal: 0, size: 10, current: 1, pages: 1, Records: [] // Actual data}}}componentDidMountThis.loading = toast.loading () {this.loading = toast.loading ();'Loading') this.handleData({ current: HandleData (options) {const {data, productId} = this. Props agentGoodsList({productId, size: 10,... options }).then(res => { Portal.remove(this.loading) this.setState({ dataList: { ... res.data, records: this.state.dataList.records.concat(res.data.records) } }) }).catch(error => { console.log(error, 11111) }) } onRefresh = () => { this.setState({ refreshing:true });
    const { data, productId } = this.props
    const { dataList: { size } } = this.state
    agentGoodsList({
      current: 1,
      productId,
      size: 10,
    }).then(res => {
      this.setState({
        dataList: res.data,
        refreshing: false
      })
    }).catch(error => {
      console.log(error, 11111)
    })
  }

  onEndReached = () => {
    const { dataList: { current, size, records, total } } = this.state
    if (records.length < total) {
      this.handleData({
        current: current + 1,
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'})}else {
      this.setState({
        searchBackgroundColor: 'transparent'}}})render() {
    const { refreshing, dataList } = this.state
    const { integral } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <RnFlatList
          style={{
            flex: 1,
            backgroundColor: '#f0f2f5',
          }}
          columnWrapperStyle={{
            paddingTop: 10,
          }}
          onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          data={dataList}
          renderItem={({ item, index }) => {
            const width = (ScreenWidth - 30) / 2
            return (
              <View style={{
                width: width,
                backgroundColor: '#fff',
                // margin: 3
                marginLeft: 10,
                borderRadius: 10,
                overflow: 'hidden'
                // marginBottom: 3
              }}>
                <TouchableOpacity
                  onPress={() => {
                    Actions.goodDetails({ goodsId: item.id, productId: item.productId, })
                  }}
                >
                  <CacheImage
                    resizeMod={"contain"}
                    style={{
                      width: width,
                      height: width,
                    }}
                    source={{ uri: `${pathHead}${item.goodsMainPic}` }} defaultSource={background} /> </TouchableOpacity> </View> ) }} /> </View > ); }}Copy the code