reactnative滑动删除

最新推荐文章于 2024-03-23 09:33:46 发布

CY2017

最新推荐文章于 2024-03-23 09:33:46 发布

阅读量5.8k

点赞数

分类专栏： app开发 C#

C# 同时被 2 个专栏收录

77 篇文章

订阅专栏

app开发

23 篇文章

订阅专栏

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(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中的代码

 
        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