SwipeableFlatList
具有侧滑效果的FlatList
react native 官方提交15de8d1
#props
renderQuickActions?: ?(rowdata, sectionID, rowID) => ? React.Element<any>
用于创建侧滑菜单
maxSwipeDistance?: ?PropTypes.number\PropTypes.func
设置最大滑动距离
bounceFirstRowOnMount?: boolean
默认值flase,为true时第一行先向左滑动,再向右滑动。
_onClose() — (Function) — Reference method that close QuickActions if any.
关闭quickAction面板 this.swipeableList._onClose()
其余属性参考FlatList
详细信息可查看链接
#实例
<SwipeableFlatList
//数据源
data={this.state.dataArray}
// 每个item的View
renderItem={data => this._renderItem(data)}
// refreshing={this.state.isLoading}
// onRefresh={this.loadData}
// 下拉刷新
refreshControl={
<RefreshControl
title={"Loading"} //ios
colors={["red"]}
size={5}
refreshing={this.state.isLoading}
onRefresh={() => this.loadData(true)}
/>
}
// 上拉加载
ListFooterComponent={this.getIndicator}
onEndReached={() => this.loadData()}
//侧滑菜单
renderQuickActions={this.getQuickAction} //侧滑展示的View
maxSwipeDistance={60} //侧滑最大距离
bounceFirstRowOnMount={false}
/>
getQuickAction = () => {
return(
<View style={styles.quickContainer}>
<TouchableHighlight
onPress={() => alert("确认删除?")}
>
<View style={styles.quick}>
<Text style={styles.text}>删除</Text>
</View>
</TouchableHighlight>
</View>
)
}