提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

React Native开源仿QQ微信列表左右滑动删除等功能组件(react-native-swipeout)

QQ列表组件开源微信React 功能 删除
2023-09-27 14:29:03 时间

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

相关文章