react native使用SwipeableFlatList组件实现类似QQ消息列表左滑出现操作按钮的效果

说明

使用的组件是SwipeableFlatList和FlatList实现的效果差不多，只是在列表上左滑出现了类似QQ消息列表的操作按钮，直接贴出列表代码。公用属性请看 这里

SwipeableFlatList组件特有属性说明

1. renderQuickActions：function 返回element或组件，即左滑渲染出来的按钮。
2. maxSwipeDistance：number 组件的宽度
3. bounceFirstRowOnMount：Boolean 打开SwipeableFlatList列表页。列表的第一个元素默认会向左滑动一下以表示此列表有滑动效果，如果不想有此效果可以将值设置为false

示例代码

App.js

import React from 'react'
import {createStackNavigator,createAppContainer} from 'react-navigation'
import Home from './components/Home'
import ScrollViewList from './components/lists/ScrollViewList'
import FlatListPage from './components/lists/FlatListPage'
import SwipeableFlatList from './components/lists/SwipeableFlatList'

const StackNavigator = createStackNavigator(
    {
        Home:{
            screen: Home,
            navigationOptions:{
                title:"首页"
            }
        },
        SwipeableFlatList:{
            screen: SwipeableFlatList,
            navigationOptions:{
                title:"SwipeableFlatList"
            }
        }
    },
    {
        headerLayoutPreset:"center"
    }
)

const AppContainer = createAppContainer(StackNavigator)
export default AppContainer

Home.js

import React from 'react'
import {View,Button,StyleSheet} from 'react-native'
export default class Home extends React.Component{
    render(){
        return(
            <View>
                <View style={style.button}>
                    <Button 
                    title={'SwipeableFlatList'} 
                    onPress={()=>this.props.navigation.navigate('SwipeableFlatList')} 
                    style={style.button}/>
                </View>
            </View>
        )
    }
}

const style=StyleSheet.create({
    button:{
        marginBottom: 10
    }
})

SwipeableFlatList.js

import React from 'react'
import {SwipeableFlatList, View, Text, StyleSheet} from 'react-native'

export default class FlatListPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            refresh: false,
            listData: []
        }
    }

    getNewData() {
        this.setState({
            refresh: true
        })
        let newData = []
        for (let i = 0; i < 2; i++) {
            newData.push('new data')
        }
        setTimeout(() => {
            this.setState({
                refresh: false,
                listData: [...newData, ...this.state.listData]
            })
        }, 1500)
    }

    componentDidMount() {
        this.getData()
    }

    getData() {
        let newData = []
        for (let i = this.state.listData.length; i < this.state.listData.length + 5; i++) {
            newData.push(i)
        }
        setTimeout(() => {
            this.setState({
                listData: [...this.state.listData, ...newData]
            })
        }, 1500)
    }

    render() {
        return (
            <View>
                <SwipeableFlatList
                    // 渲染的数据源 8
                    data={this.state.listData}

                    renderItem={(data) => {
                        return <Text style={style.item}>{data.item}</Text>
                    }}

                    // 下拉刷新数据
                    refreshing={this.state.refresh}
                    onRefresh={() => {
                        this.getNewData()
                    }}

                    // 上拉加载更多数据
                    onEndReachedThreshold={.3}
                    onEndReached={() => {
                        this.getData()
                    }}

                    ListEmptyComponent={<Text style={style.tipComponent}>暂无数据</Text>}
                    ListFooterComponent={<Text style={style.tipComponent}>获取更多数据</Text>}
                    // 列表key值
                    keyExtractor={(item, index) => index}
                    progressViewOffset={100}
                    renderQuickActions={(data) => {
                        console.log(data)
                        return <View style={style.btnWrap}>
                            <Text style={style.btn}>删除</Text>
                        </View>
                    }}
                    maxSwipeDistance={80}
                />
            </View>
        )
    }
}

const style = StyleSheet.create({
    item: {
        backgroundColor: "green",
        marginBottom: 10,
        height: 150,
        lineHeight: 150,
        textAlign: "center"
    },
    btnWrap: {
        backgroundColor: "red", alignItems: "flex-end", height: 150, lineHeight: 150
    },
    btn: {
        width: 90, textAlign: "center", lineHeight: 150
    },
    tipComponent:{
        textAlign: "center", marginBottom: 10
    }
})

效果图