做过移动开发的同学都应该清楚，侧滑删除是移动开发中的一个常见功能。在官方没提供侧滑组件之前，要实现侧滑效果需要使用第三方库，如react-native-swipe-list-view。不过随着React Native 0.50版本的发布，系统新添加SwipeableFlatList组件，SwipeableFlatList是在FlatList基础上实现的侧滑显示菜单的功能，大大的方便了开发。
SwipeableFlatList支持FlatList的所有的属性和方法，另外它还有三个自己的属性，在使用SwipeableFlatList实现侧滑效果时需要处理这三个属性。
- bounceFirstRowOnMount: bool 是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item；
- maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离
- renderQuickActions：func，必须要赋值，表示滑动显示的内容。
下面让我们实现一个简单的侧滑删除的实例，其效果如下： 
SwipeableFlatList代码如下：
import React, {Component} from 'react';
import {
StyleSheet, Dimensions, View, Alert,Text, TouchableHighlight,Image, SwipeableFlatList
} from 'react-native';
import data from '../src/config/data' //模拟数据
const {width} = Dimensions.get('window');
export default class SwipeableFlatList extends Component {
render() {
return (
<SwipeableFlatList style={styles.flex}
data={data}
bounceFirstRowOnMount={true}
maxSwipeDistance={160}
keyExtractor={this.extraUniqueKey}
renderItem={this.renderItemView.bind(this)}
renderQuickActions={this.renderQuickActions.bind(this)}
/>
);
}
extraUniqueKey(item, index) {
return "index" + index + item;
}
//填充Item Cell
renderItemView({item}) {
let imageUrl = item.squareimgurl.replace('w.h', '160.0').replace('http', 'https');
return (
<View style={styles.container}>
<Image source={{uri: imageUrl}} style={styles.icon}/>
<View style={styles.rightContainer}>
<Text>{item.mname}</Text>
<View>
</View>
<Text style={styles.p} numberOfLines={0}>{item.title}</Text>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<Text>{item.price}元</Text>
</View>
</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}>编辑</Text>
</TouchableHighlight>
<TouchableHighlight
style={[styles.actionButton, styles.actionButtonDestructive]}
onPress={() => {
Alert.alert(
'删除'+item.mname,
item.title,
);
}}>
<Text style={styles.actionButtonText}>删除</Text>
</TouchableHighlight>
</View>
);
}
}
const
styles = StyleSheet.create({
flex: {
flex: 1,
width: width,
backgroundColor: 'white'
},
container: {
flex: 1,
width: width,
flexDirection: 'row',
padding: 10,
borderBottomWidth: 1,
borderColor: '#e9e9e9',
backgroundColor: 'white',
},
icon: {
width: 80,
height: 80,
borderRadius: 5,
},
rightContainer: {
flex: 1,
paddingLeft: 20,
paddingRight: 10,
},
h1: {
fontSize: 15,
fontWeight: 'bold',
color: '#222222',
},
p: {
fontSize: 13,
color: '#777777',
marginTop: 8,
},
actionsContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
},
actionButton: {
padding: 10,
width: 80,
justifyContent: 'center',
backgroundColor: '#999999',
},
actionButtonDestructive: {
backgroundColor: '#FF0000',
},
actionButtonText: {
textAlign: 'center',
},
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
其中模拟的数据内容如下：
export default
[
{
"rating": 4.6,
"range": "150店通用",
"mname": "吉野家",
"title": "卤肉饭+乌龙茶（小）1份",
"price": 10,
"squareimgurl": "http://p0.meituan.net/w.h/deal/5911c9d9235036c6fc11fcb1dbcb5bce27954.jpg@87_0_266_266a%7C267h_267w_2e_100Q",
},
{
"rating": 4.4,
"range": "北京等",
"mname": "真功夫",
"title": "冬(香)菇鸡腿肉饭\t+\t卤蛋1份",
"price": 15,
"squareimgurl": "http://p1.meituan.net/w.h/deal/15c8885d14f18774938a88752f08bb1e49194.jpg@118_0_466_466a%7C267h_267w_2e_90Q",
},
{
"rating": 4.2,
"range": "46店通用",
"mname": "京八珍",
"title": "50元代金券1张，可叠加",
"price": 65,
"squareimgurl": "http://p0.meituan.net/w.h/deal/d57d5f0644256a3013469edfc1406e8022163.jpg",
},
{
"rating": 4.2,
"range": "2店通用",
"mname": "麻里麻里",
"title": "2人餐，提供免费WiFi",
"price": 78,
"squareimgurl": "http://p0.meituan.net/w.h/deal/f436e044254128059f055f2275eadbb837054.jpg",
},
{
"rating": 4.4,
"range": "2店通用",
"mname": "东来顺饭庄",
"title": "4-5人套餐，百年老字号",
"price": 168,
"squareimgurl": "http://p0.meituan.net/w.h/deal/416d01cbc4b8a2871b3c260615b5998088199.jpg",
},
{
"rating": 4.2,
"range": "12店通用",
"mname": "果麦de鲜饮创作",
"title": "饮品3选1，提供免费WiFi",
"price": 7.99,
"squareimgurl": "http://p1.meituan.net/w.h/deal/d72d34a7038e8cca2d09406ec7dc5c83133480.jpg@0_297_1332_1332a%7C267h_267w_2e_90Q",
},
{
"rating": 4,
"range": "4店通用",
"mname": "夹拣成厨麻辣烫",
"title": "50元代金券1张，可叠加",
"price": 39,
"squareimgurl": "http://p1.meituan.net/w.h/deal/712801d4f3562706f596cd366376889f25073.jpg@71_0_444_444a%7C267h_267w_2e_90Q",
},
{
"rating": 4.6,
"range": "150店通用",
"mname": "吉野家",
"title": "卤肉饭+乌龙茶（小）1份",
"price": 10,
"squareimgurl": "http://p0.meituan.net/w.h/deal/5911c9d9235036c6fc11fcb1dbcb5bce27954.jpg@87_0_266_266a%7C267h_267w_2e_100Q",
},
{
"rating": 4.4,
"range": "北京等",
"mname": "真功夫",
"title": "冬(香)菇鸡腿肉饭\t+\t卤蛋1份",
"price": 15,
"squareimgurl": "http://p1.meituan.net/w.h/deal/15c8885d14f18774938a88752f08bb1e49194.jpg@118_0_466_466a%7C267h_267w_2e_90Q",
},
{
"rating": 4.2,
"range": "46店通用",
"mname": "京八珍",
"title": "50元代金券1张，可叠加",
"squareimgurl": "http://p0.meituan.net/w.h/deal/d57d5f0644256a3013469edfc1406e8022163.jpg",
},
{
"rating": 4.2,
"range": "2店通用",
"mname": "麻里麻里",
"title": "2人餐，提供免费WiFi",
"price": 78,
"squareimgurl": "http://p0.meituan.net/w.h/deal/f436e044254128059f055f2275eadbb837054.jpg",
},
{
"rating": 4.4,
"range": "2店通用",
"mname": "东来顺饭庄",
"title": "4-5人套餐，百年老字号",
"price": 168,
"squareimgurl": "http://p0.meituan.net/w.h/deal/416d01cbc4b8a2871b3c260615b5998088199.jpg",
},
{
"rating": 4.2,
"range": "12店通用",
"mname": "果麦de鲜饮创作",
"title": "饮品3选1，提供免费WiFi",
"price": 7.99,
"squareimgurl": "http://p1.meituan.net/w.h/deal/d72d34a7038e8cca2d09406ec7dc5c83133480.jpg@0_297_1332_1332a%7C267h_267w_2e_90Q",
},
{
"rating": 4,
"range": "4店通用",
"mname": "夹拣成厨麻辣烫",
"title": "50元代金券1张，可叠加",
"price": 39,
"squareimgurl": "http://p1.meituan.net/w.h/deal/712801d4f3562706f596cd366376889f25073.jpg@71_0_444_444a%7C267h_267w_2e_90Q",
},
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
做过移动开发的同学都应该清楚，侧滑删除是移动开发中的一个常见功能。在官方没提供侧滑组件之前，要实现侧滑效果需要使用第三方库，如react-native-swipe-list-view。不过随着React Native 0.50版本的发布，系统新添加SwipeableFlatList组件，SwipeableFlatList是在FlatList基础上实现的侧滑显示菜单的功能，大大的方便了开发。
SwipeableFlatList支持FlatList的所有的属性和方法，另外它还有三个自己的属性，在使用SwipeableFlatList实现侧滑效果时需要处理这三个属性。
- bounceFirstRowOnMount: bool 是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item；
- maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离
- renderQuickActions：func，必须要赋值，表示滑动显示的内容。
下面让我们实现一个简单的侧滑删除的实例，其效果如下：
SwipeableFlatList代码如下：
import React, {Component} from 'react';
import {
StyleSheet, Dimensions, View, Alert,Text, TouchableHighlight,Image, SwipeableFlatList
} from 'react-native';
import data from '../src/config/data' //模拟数据
const {width} = Dimensions.get('window');
export default class SwipeableFlatList extends Component {
render() {
return (
<SwipeableFlatList style={styles.flex}
data={data}
bounceFirstRowOnMount={true}
maxSwipeDistance={160}
keyExtractor={this.extraUniqueKey}
renderItem={this.renderItemView.bind(this)}
renderQuickActions={this.renderQuickActions.bind(this)}
/>
);
}
extraUniqueKey(item, index) {
return "index" + index + item;
}
//填充Item Cell
renderItemView({item}) {
let imageUrl = item.squareimgurl.replace('w.h', '160.0').replace('http', 'https');
return (
<View style={styles.container}>
<Image source={{uri: imageUrl}} style={styles.icon}/>
<View style={styles.rightContainer}>
<Text>{item.mname}</Text>
<View>
</View>
<Text style={styles.p} numberOfLines={0}>{item.title}</Text>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<Text>{item.price}元</Text>
</View>
</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}>编辑</Text>
</TouchableHighlight>
<TouchableHighlight
style={[styles.actionButton, styles.actionButtonDestructive]}
onPress={() => {
Alert.alert(
'删除'+item.mname,
item.title,
);
}}>
<Text style={styles.actionButtonText}>删除</Text>
</TouchableHighlight>
</View>
);
}
}
const
styles = StyleSheet.create({
flex: {
flex: 1,
width: width,
backgroundColor: 'white'
},
container: {
flex: 1,
width: width,
flexDirection: 'row',
padding: 10,
borderBottomWidth: 1,
borderColor: '#e9e9e9',
backgroundColor: 'white',
},
icon: {
width: 80,
height: 80,
borderRadius: 5,
},
rightContainer: {
flex: 1,
paddingLeft: 20,
paddingRight: 10,
},
h1: {
fontSize: 15,
fontWeight: 'bold',
color: '#222222',
},
p: {
fontSize: 13,
color: '#777777',
marginTop: 8,
},
actionsContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
},
actionButton: {
padding: 10,
width: 80,
justifyContent: 'center',
backgroundColor: '#999999',
},
actionButtonDestructive: {
backgroundColor: '#FF0000',
},
actionButtonText: {
textAlign: 'center',
},
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
其中模拟的数据内容如下：
export default
[
{
"rating": 4.6,
"range": "150店通用",
"mname": "吉野家",
"title": "卤肉饭+乌龙茶（小）1份",
"price": 10,
"squareimgurl": "http://p0.meituan.net/w.h/deal/5911c9d9235036c6fc11fcb1dbcb5bce27954.jpg@87_0_266_266a%7C267h_267w_2e_100Q",
},
{
"rating": 4.4,
"range": "北京等",
"mname": "真功夫",
"title": "冬(香)菇鸡腿肉饭\t+\t卤蛋1份",
"price": 15,
"squareimgurl": "http://p1.meituan.net/w.h/deal/15c8885d14f18774938a88752f08bb1e49194.jpg@118_0_466_466a%7C267h_267w_2e_90Q",
},
{
"rating": 4.2,
"range": "46店通用",
"mname": "京八珍",
"title": "50元代金券1张，可叠加",
"price": 65,
"squareimgurl": "http://p0.meituan.net/w.h/deal/d57d5f0644256a3013469edfc1406e8022163.jpg",
},
{
"rating": 4.2,
"range": "2店通用",
"mname": "麻里麻里",
"title": "2人餐，提供免费WiFi",
"price": 78,
"squareimgurl": "http://p0.meituan.net/w.h/deal/f436e044254128059f055f2275eadbb837054.jpg",
},
{
"rating": 4.4,
"range": "2店通用",
"mname": "东来顺饭庄",
"title": "4-5人套餐，百年老字号",
"price": 168,
"squareimgurl": "http://p0.meituan.net/w.h/deal/416d01cbc4b8a2871b3c260615b5998088199.jpg",
},
{
"rating": 4.2,
"range": "12店通用",
"mname": "果麦de鲜饮创作",
"title": "饮品3选1，提供免费WiFi",
"price": 7.99,
"squareimgurl": "http://p1.meituan.net/w.h/deal/d72d34a7038e8cca2d09406ec7dc5c83133480.jpg@0_297_1332_1332a%7C267h_267w_2e_90Q",
},
{
"rating": 4,
"range": "4店通用",
"mname": "夹拣成厨麻辣烫",
"title": "50元代金券1张，可叠加",
"price": 39,
"squareimgurl": "http://p1.meituan.net/w.h/deal/712801d4f3562706f596cd366376889f25073.jpg@71_0_444_444a%7C267h_267w_2e_90Q",
},
{
"rating": 4.6,
"range": "150店通用",
"mname": "吉野家",
"title": "卤肉饭+乌龙茶（小）1份",
"price": 10,
"squareimgurl": "http://p0.meituan.net/w.h/deal/5911c9d9235036c6fc11fcb1dbcb5bce27954.jpg@87_0_266_266a%7C267h_267w_2e_100Q",
},
{
"rating": 4.4,
"range": "北京等",
"mname": "真功夫",
"title": "冬(香)菇鸡腿肉饭\t+\t卤蛋1份",
"price": 15,
"squareimgurl": "http://p1.meituan.net/w.h/deal/15c8885d14f18774938a88752f08bb1e49194.jpg@118_0_466_466a%7C267h_267w_2e_90Q",
},
{
"rating": 4.2,
"range": "46店通用",
"mname": "京八珍",
"title": "50元代金券1张，可叠加",
"squareimgurl": "http://p0.meituan.net/w.h/deal/d57d5f0644256a3013469edfc1406e8022163.jpg",
},
{
"rating": 4.2,
"range": "2店通用",
"mname": "麻里麻里",
"title": "2人餐，提供免费WiFi",
"price": 78,
"squareimgurl": "http://p0.meituan.net/w.h/deal/f436e044254128059f055f2275eadbb837054.jpg",
},
{
"rating": 4.4,
"range": "2店通用",
"mname": "东来顺饭庄",
"title": "4-5人套餐，百年老字号",
"price": 168,
"squareimgurl": "http://p0.meituan.net/w.h/deal/416d01cbc4b8a2871b3c260615b5998088199.jpg",
},
{
"rating": 4.2,
"range": "12店通用",
"mname": "果麦de鲜饮创作",
"title": "饮品3选1，提供免费WiFi",
"price": 7.99,
"squareimgurl": "http://p1.meituan.net/w.h/deal/d72d34a7038e8cca2d09406ec7dc5c83133480.jpg@0_297_1332_1332a%7C267h_267w_2e_90Q",
},
{
"rating": 4,
"range": "4店通用",
"mname": "夹拣成厨麻辣烫",
"title": "50元代金券1张，可叠加",
"price": 39,
"squareimgurl": "http://p1.meituan.net/w.h/deal/712801d4f3562706f596cd366376889f25073.jpg@71_0_444_444a%7C267h_267w_2e_90Q",
},
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116