尊重版权,转载请注明出处
本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)
开源项目地址:https://github.com/dancormier/react-native-swipeout
项目介绍
该组件进行封装实现仿照QQ,微信列表的右滑显示删除,置顶等其他功能item的效果。
创建的React Native技术交流4群:458982758,欢迎各位大牛,React Native技术爱好者加入交流!
配置安装
1.1.运行命令进行安装
1
|
npm install --save react-native-swipeout
|
使用实例
关于更多的使用实例,可以查看example中的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
Swipeout = require(
'react-native-swipeout'
)
// Buttons
var
swipeoutBtns = [
{
text:
'Button'
}
]
// Swipeout component
<Swipeout right={swipeoutBtns}>
<View>
<Text>Swipe me left</Text>
</View>
</Swipeout>
|
运行效果
配置属性
属性名 | 类型 | 是否可选 | 默认值 | 描述信息 |
---|---|---|---|---|
autoClose | bool | Yes | false | 按钮点击是否自动关闭 |
backgroundColor | string | Yes | '#dbddde' | |
close | bool | Yes | 关闭滑动拖拽 | |
left | array | Yes | [] | 在左侧进行拖拽 |
onOpen | func | Yes | ||
right | array | Yes | [] | 在右侧进行拖拽 |
scroll | func | Yes | prevent parent scroll |
按钮属性
属性 | 类型 | 是否可选 | 默认 | 描述信息 |
---|---|---|---|---|
backgroundColor | string | Yes | '#b6bec0' | background color |
color | string | Yes | '#ffffff' | text color |
component | string | Yes | null | pass custom component to button |
onPress | func | Yes | null | function executed onPress |
text | string | Yes | 'Click Me' | text |
type | string | Yes | 'default' | default, primary, secondary |
underlayColor | string | Yes | null |