React-Native 0.50+ 新添加SwipeableFlatList组件,SwipeableFlatList是在FlatList基础上添加了侧滑显示菜单的功能,类似于侧滑删除效果。
它有FlatList所有的属性和方法,另外它还有三个自己的属性:
1. bounceFirstRowOnMount: bool 是一个bool属性,默认是YES,表示第一次是否先滑一下FlatList的Item
2.maxSwipeDistance: number 或者 func, 必须要赋值,表示向左滑动的最大距离
3.renderQuickActions:func,必须要赋值,表示滑动显示的内容
一个最简单的例子:
'use strict';
import React, {Component} from 'react';
import {
Image,
SwipeableFlatList,
TouchableHighlight,
StyleSheet,
Text,
View,
Alert,
} from 'react-native';
const data = [
{
key: 'like',
icon: require('./Thumbnails/like.png'),
data: 'Like!',
},
{
key: 'heart',
icon: require('./Thumbnails/heart.png'),
data: 'Heart!',
},
{
key: 'party',
icon: require('./Thumbnails/party.png'),
data: 'Party!',
},
];
export default class SwipeableFlatListExample extends Component{
render() {
return (
<SwipeableFlatList
data={data}
bounceFirstRowOnMount={true}
maxSwipeDistance={160}
renderItem={this._renderItem.bind(this)}
renderQuickActions={this._renderQuickActions.bind(this)}
/>
);
},
_renderItem({item}) {
return (
<View style={styles.row}>
<Image style={styles.rowIcon} source={item.icon} />
<View style={styles.rowData}>
<Text style={styles.rowDataText}>{item.data}</Text>
</View>
</View>
);
},
_renderQuickActions({item}) {
return (
<View style={styles.actionsContainer}>
<TouchableHighlight
style={styles.actionButton}
onPress={() => {
Alert.alert(
'Tips',
'You could do something with this edit action!',
);
}}>
<Text style={styles.actionButtonText}>Edit</Text>
</TouchableHighlight>
<TouchableHighlight
style={[styles.actionButton, styles.actionButtonDestructive]}
onPress={() => {
Alert.alert(
'Tips',
'You could do something with this remove action!',
);
}}>
<Text style={styles.actionButtonText}>Remove</Text>
</TouchableHighlight>
</View>
);
},
}
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
rowIcon: {
width: 64,
height: 64,
marginRight: 20,
},
rowData: {
flex: 1,
},
rowDataText: {
fontSize: 24,
},
actionsContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
actionButton: {
padding: 10,
width: 80,
backgroundColor: '#999999',
},
actionButtonDestructive: {
backgroundColor: '#FF0000',
},
actionButtonText: {
textAlign: 'center',
},
});