@@ -2,8 +2,40 @@ SwipeAction 滑动操作组件。
22---
33结合手势操作,从屏幕一侧唤出操作。
44
5+ ![ ] ( https://user-images.githubusercontent.com/57083007/146733663-6c83fca4-72df-424d-8364-47533f57ece6.gif )
6+
57### 基础示例
68
9+ ``` jsx
10+ import React from ' react' ;
11+ import {SwipeAction } from ' @uiw/react-native' ;
12+ import { View ,Text } from ' react-native'
13+
14+ function Demo () {
15+ const right = [
16+ {
17+ text: ' 查看' ,
18+ color: ' orange' ,
19+ x: 250 ,
20+ onPress : () => ref? .current ? .swipeable .close ()
21+ },
22+ {
23+ text: ' 删除' ,
24+ color: ' red' ,
25+ x: 250 ,
26+ },
27+ ];
28+ return (
29+ < SwipeAction ref= {ref} buttonWidth= {60 } right= {right}>
30+ < View>< Text > 滑动< / Text >< / View>
31+ < / SwipeAction>
32+ );
33+ }
34+ export default Demo ;
35+ ` ` `
36+
37+ ### 禁用
38+
739` ` ` jsx
840import React ,{ useRef } from ' react' ;
941import {SwipeAction } from ' @uiw/react-native' ;
@@ -16,16 +48,42 @@ function Demo() {
1648 text: ' 查看' ,
1749 color: ' orange' ,
1850 x: 250 ,
19- onPress : () => ref? .current ? .swipeable .close ()
2051 },
2152 {
2253 text: ' 删除' ,
2354 color: ' red' ,
24- x: 400 ,
55+ x: 250 ,
56+ disabled: true
57+ },
58+ ];
59+ return (
60+ < SwipeAction ref= {ref} buttonWidth= {60 } right= {right}>
61+ < View>< Text > 滑动< / Text >< / View>
62+ < / SwipeAction>
63+ );
64+ }
65+ export default Demo ;
66+ ` ` `
67+
68+ ### 主动关闭
69+
70+ ` ` ` jsx
71+ import React ,{ useRef } from ' react' ;
72+ import {SwipeAction } from ' @uiw/react-native' ;
73+ import { View ,Text } from ' react-native'
74+
75+ function Demo () {
76+ const ref = useRef ()
77+ const right = [
78+ {
79+ text: ' 查看' ,
80+ color: ' orange' ,
81+ x: 250 ,
82+ onPress : () => ref? .current ? .swipeable .close ()
2583 },
2684 {
27- text: ' 不显示 ' ,
28- color: ' green ' ,
85+ text: ' 删除 ' ,
86+ color: ' red ' ,
2987 x: 400 ,
3088 },
3189 ];
@@ -42,8 +100,8 @@ export default Demo;
42100### Props
43101| 参数 | 说明 | 类型 | 默认值 |
44102|------|------|-----|------|
45- | ` right` | 右边滑动出来的元素 | Array<Column > | - |
46- | ` left` | 左边滑动出来的元素 | Array<Column > | - |
103+ | ` right` | 右边滑动出来的元素 | Array<` ColumnProps ` > | - |
104+ | ` left` | 左边滑动出来的元素 | Array<` ColumnProps ` > | - |
47105| ` buttonWidth` | 按钮宽度 | number | 60 |
48106
49107### ColumnProps
0 commit comments