FlatList组合AntDesgin的侧滑组件案例

简介：

使用中国城市，完成了上滑加载，下滑刷新，左右侧滑定制功能的需求。

package.json

{
  "name": "nativeTemplate",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@bang88/china-city-data": "^1.0.0",
    "react": "16.13.1",
    "react-native": "0.63.4",

    "@ant-design/react-native": "^4.0.7",
  
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/cameraroll": "^4.0.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-community/viewpager": "^4.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.js

import React from 'react'
import { View, Text, FlatList, RefreshControl } from 'react-native'
import cities from '@bang88/china-city-data'
import { SwipeAction } from '@ant-design/react-native';

let step = 2 //向下翻时，每次加载两条数据
let start = head = 3 //从城市的第四条开始显示

class App extends React.Component {

  constructor(props) {
    super(props)
    //初始只显示5条数据
    this.state = { refreshing: false, cities: cities.slice(start, start += 5) }
  }

// 使用城市对象，渲染出FlatList中的一行数据（加入了Ant Desgin的侧滑组件）
  _item = (({ item }) => {
    const right = [
      {
        text: 'More',
        onPress: () => console.log('more'),
        style: { backgroundColor: 'orange', color: 'white' },
      },
      {
        // 此处完成侧滑删除功能
        text: 'Delete',
        onPress: () => {
          this.setState((state)=>{
            let index=state.cities.findIndex(city=>city.value==item.value)
            state.cities.splice(index,1)
            return state
          })
          
        },
        style: { backgroundColor: 'red', color: 'white' },
      },
    ];
    const left = [
      {
        text: 'Read',
        onPress: () => console.log('read'),
        style: { backgroundColor: 'blue', color: 'white' },
      },
      {
        text: 'Reply',
        onPress: () => console.log('reply'),
        style: { backgroundColor: 'green', color: 'white' },
      },
    ];


    return (
      <SwipeAction
        autoClose
        style={{ backgroundColor: 'transparent' }}
        right={right}
        left={left}
        onOpen={() => console.log('open')}
        onClose={() => console.log('close')}>

          <View style={{ flexDirection: 'row', height: 160, alignItems: 'center' }}>
            <Text style={{ flex: 1, fontSize: 20 }}>{item.value}</Text>
            <Text style={{ flex: 3, fontSize: 20 }}>{item.label}</Text>
          </View>

      </SwipeAction>
    )
  })
  _sep = () => {
    return <View style={{ height: 2, backgroundColor: 'lightblue' }}></View>
  }
  _end = () => {
    this.setState({ refreshing: true })
    setTimeout(() => {
      this.setState((prev, props) => {
        let temp = cities.slice(start, start += step)
        prev.cities.push(...temp)
        prev.refreshing = false
        return prev
      })
    }, 1000)

  }
  _refrech = () => {
    if (head <= 0) {
      alert("已经没有更多的数据了")
      return
    }
    this.setState({ refreshing: true })

    setTimeout(() => {
      this.setState((prev, props) => {
        prev.refreshing = false
        prev.cities.unshift(cities[--head])
        return prev
      })
    }, 2000)

  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.cities}
          keyExtractor={city => city.value}
          renderItem={this._item}
          ItemSeparatorComponent={this._sep}
          onEndReachedThreshold={0.1}
          onEndReached={this._end}
          refreshControl={<RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._refrech} />}>
        </FlatList>
      </View>
    )
  }
}
export default App