Skip to content

Commit 65f6c2c

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #467 from uiwjs/dev
doc:SwipeAction文档更改
2 parents c3f1c2d + 7615235 commit 65f6c2c

File tree

1 file changed

+96
-107
lines changed

1 file changed

+96
-107
lines changed

‎packages/core/src/SwipeAction/README.md‎

Lines changed: 96 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,114 @@
11
SwipeAction 滑动操作组件。
22
---
3-
43
结合手势操作，从屏幕一侧唤出操作。
54

65
![](https://user-images.githubusercontent.com/57083007/146733663-6c83fca4-72df-424d-8364-47533f57ece6.gif)
76

87
### 基础示例
98

10-
```tsx
11-
import React, { Component } from 'react';
12-
import { StyleSheet } from 'react-native';
13-
import { SwipeAction } from '@uiw/react-native';
9+
```jsx
10+
import React from 'react';
11+
import {SwipeAction} from '@uiw/react-native';
12+
import { View,Text } from 'react-native'
1413

15-
export interface SwipeActionProps {
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+
);
1633
}
34+
export default Demo;
35+
```
1736
18-
export default class SwipeActionView extends Component<SwipeActionProps> {
19-
newRef: any;
20-
render() {
21-
const right = [
22-
{
23-
text: '查看',
24-
color: 'orange',
25-
x: 250,
26-
onPress: () => {
27-
this.newRef?.swipeable?.close()
28-
},
29-
},
30-
{
31-
text: '删除',
32-
color: 'red',
33-
x: 400,
34-
onPress: () => {
35-
this.newRef?.swipeable?.close()
36-
},
37-
},
38-
{
39-
text: '不显示',
40-
color: 'green',
41-
x: 400,
42-
onPress: () => {
43-
this.newRef?.swipeable?.close()
44-
},
45-
},
46-
];
47-
return (
48-
<SwipeAction
49-
buttonWidth={60}
50-
ref={ref => this.newRef = ref}
51-
right={right}
52-
onSwipeableRightOpen={() => console.log('right')}
53-
onSwipeableLeftOpen={() => () => console.log('left')}
54-
>
55-
<View style={[styles.view]}>
56-
<Text>滑动</Text>
57-
</View>
58-
</SwipeAction>
59-
);
60-
}
61-
}
37+
### 禁用
6238
63-
const styles = StyleSheet.create({
64-
card: {
65-
backgroundColor: '#fff',
66-
paddingLeft: 20,
67-
paddingRight: 20,
68-
paddingBottom: 30,
69-
},
70-
view: {
71-
height: 30
72-
},
73-
});
39+
```jsx
40+
import React,{ useRef } from 'react';
41+
import {SwipeAction} from '@uiw/react-native';
42+
import { View,Text } from 'react-native'
7443

44+
function Demo() {
45+
const ref = useRef()
46+
const right = [
47+
{
48+
text: '查看',
49+
color: 'orange',
50+
x: 250,
51+
},
52+
{
53+
text: '删除',
54+
color: 'red',
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;
7566
```
7667
68+
### 主动关闭
7769
78-
### Props
79-
组件继承react-native-gesture-handler[`Swipeable`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable)
80-
```tsx
81-
export interface Column {
82-
/** 显示文字 */
83-
text: string;
84-
/** 背景色 */
85-
color: string;
86-
/** 点击元素触发 */
87-
onPress?: () => void;
88-
/** 是否禁用 */
89-
disabled?: boolean;
90-
/** 自定义元素 */
91-
render?: (text: string, record: Column, index: number) => React.ReactNode;
92-
}
70+
```jsx
71+
import React,{ useRef } from 'react';
72+
import {SwipeAction} from '@uiw/react-native';
73+
import { View,Text } from 'react-native'
9374

94-
export interface SwipeActionProps {
95-
/** 右边滑动出来的元素 */
96-
right?: Array<Column>;
97-
/** 左边滑动出来的元素 */
98-
left?: Array<Column>;
99-
/** 按钮宽度 默认60 */
100-
buttonWidth?:string | number
101-
/** 其余api参考文档 react-native-gesture-handler/Swipeable */
102-
enableTrackpadTwoFingerGesture?: boolean;
103-
friction?: number;
104-
leftThreshold?: number;
105-
rightThreshold?: number;
106-
overshootLeft?: boolean;
107-
overshootRight?: boolean;
108-
overshootFriction?: number;
109-
onSwipeableLeftOpen?: () => void;
110-
onSwipeableRightOpen?: () => void;
111-
onSwipeableOpen?: () => void;
112-
onSwipeableClose?: () => void;
113-
onSwipeableLeftWillOpen?: () => void;
114-
onSwipeableRightWillOpen?: () => void;
115-
onSwipeableWillOpen?: () => void;
116-
onSwipeableWillClose?: () => void;
117-
children?: React.ReactNode;
118-
renderLeftActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
119-
renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
120-
useNativeAnimations?: boolean;
121-
animationOptions?: Record<string, unknown>;
122-
containerStyle?: StyleProp<ViewStyle>;
123-
childrenContainerStyle?: StyleProp<ViewStyle>;
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()
83+
},
84+
{
85+
text: '删除',
86+
color: 'red',
87+
x: 400,
88+
},
89+
];
90+
return (
91+
<SwipeAction ref={ref} buttonWidth={60} right={right}>
92+
<View><Text>滑动</Text></View>
93+
</SwipeAction>
94+
);
12495
}
125-
```
96+
export default Demo;
97+
```
98+
99+
组件继承react-native-gesture-handler[`Swipeable`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable)
100+
### Props
101+
| 参数 | 说明 | 类型 | 默认值 |
102+
|------|------|-----|------|
103+
| `right` | 右边滑动出来的元素 | Array<`ColumnProps`> | - |
104+
| `left` | 左边滑动出来的元素 | Array<`ColumnProps`> | - |
105+
| `buttonWidth` | 按钮宽度 | number | 60 |
106+
107+
### ColumnProps
108+
| 参数 | 说明 | 类型 | 默认值 |
109+
|------|------|-----|------|
110+
| `text` | 显示文字 | string | - |
111+
| `color` | 背景色 | string | - |
112+
| `onPress` | 点击元素触发 | () => void | - |
113+
| `disabled` | 是否禁用 | Boolean | - |
114+
| `render` | 自定义元素 | (text: string, record: Column, index: number) => React.ReactNode | - |

0 commit comments

Comments
 (0)