Skip to content

Commit c539b90

Browse files
ChenlingasMxChenlingasMx
committed
fix:删除react-native-swipeout & 重构 SwipeAction
1 parent 879395f commit c539b90

File tree

4 files changed

+205
-143
lines changed

4 files changed

+205
-143
lines changed

‎example/examples/src/routes/SwipeAction/index.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,15 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
1616
const right = [
1717
{
1818
text: 'More',
19-
onPress: () => console.log('more'),
20-
style: {backgroundColor: 'orange', color: 'white'},
19+
color: 'orange',
20+
x: 250,
21+
onPress: () => {},
2122
},
2223
{
2324
text: 'Delete',
24-
onPress: () => console.log('delete'),
25-
style: {backgroundColor: 'red', color: 'white'},
26-
},
27-
];
28-
const left = [
29-
{
30-
text: 'Read',
31-
onPress: () => console.log('read'),
32-
style: {backgroundColor: 'blue', color: 'white'},
33-
},
34-
{
35-
text: 'Reply',
36-
onPress: () => console.log('reply'),
37-
style: {backgroundColor: 'green', color: 'white'},
25+
color: 'red',
26+
x: 400,
27+
onPress: () => {},
3828
},
3929
];
4030
return (
@@ -44,12 +34,10 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
4434
<Body>
4535
<Card title="左右滑动，显示按钮" style={styles.card}>
4636
<SwipeAction
47-
autoClose
48-
style={{backgroundColor: 'transparent'}}
4937
right={right}
50-
left={left}
51-
onOpen={() => console.log('open')}
52-
onClose={() => console.log('close')}>
38+
onSwipeableRightOpen={() => {
39+
console.log('right');
40+
}}>
5341
<View style={styles.view}>
5442
<Text>滑动</Text>
5543
</View>

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"prop-types": "15.7.2",
6262
"react-native-root-siblings": "4.1.1",
6363
"react-native-svg": "12.1.1",
64-
"react-native-swipeout": "2.3.6"
64+
"react-native-gesture-handler":"1.10.3"
6565
},
6666
"peerDependencies": {
6767
"react": ">=16.9.0",

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

Lines changed: 83 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,62 +7,103 @@ SwipeAction 滑动操作组件。
77
## 基础示例
88

99
```jsx
10-
import React from 'react';
11-
import { View, SwipeAction } from '@uiw/react-native';
10+
import React, { Component } from 'react';
11+
import { View, Text, StyleSheet } from 'react-native';
12+
import { SwipeAction } from '@uiw/react-native';
13+
import Layout, { Container } from '../../Layout';
14+
import { ComProps } from '../../routes';
1215

13-
export default class BasicSwipeActionExample extends React.Component {
16+
const { Header, Body, Card, Footer } = Layout;
17+
18+
export interface SwipeActionProps extends ComProps { }
19+
20+
export default class SwipeActionView extends Component<SwipeActionProps> {
1421
render() {
22+
const { route } = this.props;
23+
const description = route.params.description;
24+
const title = route.params.title;
1525
const right = [
1626
{
1727
text: 'More',
18-
onPress: () => console.log('more'),
19-
style: { backgroundColor: 'orange', color: 'white' },
28+
color: "orange",
29+
x: 250,
30+
onPress: () => { },
2031
},
2132
{
2233
text: 'Delete',
23-
onPress: () => console.log('delete'),
24-
style: { backgroundColor: 'red', color: 'white' },
25-
},
26-
];
27-
const left = [
28-
{
29-
text: 'Read',
30-
onPress: () => console.log('read'),
31-
style: { backgroundColor: 'blue', color: 'white' },
32-
},
33-
{
34-
text: 'Reply',
35-
onPress: () => console.log('reply'),
36-
style: { backgroundColor: 'green', color: 'white' },
37-
},
34+
color: "red",
35+
x: 400,
36+
onPress: () => { },
37+
}
3838
];
3939
return (
40-
<SwipeAction
41-
autoClose
42-
style={{ backgroundColor: 'transparent' }}
43-
right={right}
44-
left={left}
45-
onOpen={() => console.log('open')}
46-
onClose={() => console.log('close')}
47-
>
48-
<View>
49-
<Text>滑动</Text>
50-
</View>
51-
</SwipeAction>
40+
<Container>
41+
<Layout>
42+
<Header title={title} description={description} />
43+
<Body>
44+
<Card title="左右滑动，显示按钮" style={styles.card}>
45+
<SwipeAction
46+
right={right}
47+
>
48+
<View style={styles.view}>
49+
<Text>滑动</Text>
50+
</View>
51+
</SwipeAction>
52+
</Card>
53+
</Body>
54+
<Footer />
55+
</Layout>
56+
</Container>
5257
);
5358
}
5459
}
60+
61+
const styles = StyleSheet.create({
62+
card: {
63+
backgroundColor: '#fff',
64+
paddingLeft: 20,
65+
paddingRight: 20,
66+
paddingBottom: 30,
67+
},
68+
view: {
69+
height: 30,
70+
},
71+
});
72+
5573
```
5674

5775

5876
## Props
59-
60-
属性 | 说明 | 类型 | 默认值
61-
----|-----|------|------
62-
| style | `swipeout` 样式 | Object | |
63-
| left | 左侧按钮组 | Array | `null` |
64-
| right | 右侧按钮组 | Array | `null` |
65-
| autoClose | 点击按钮后自动隐藏按钮 | Boolean | `function() {}` |
66-
| onOpen | 打开时回调函数 | (): void | `function() {}` |
67-
| disabled | 禁用 `swipeout` | Boolean | `false` |
68-
| onClose | 关闭时回调函数 | (): void | `function() {}` |
77+
组件继承react-native-gesture-handler[`Swipeable`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable)
78+
```tsx
79+
export interface SwipeActionProps {
80+
right: Array<{
81+
text: string;
82+
color: string;
83+
x?: number;
84+
onPress?: () => void
85+
}>;
86+
enableTrackpadTwoFingerGesture?: boolean;
87+
friction?: number;
88+
leftThreshold?: number;
89+
rightThreshold?: number;
90+
overshootLeft?: boolean;
91+
overshootRight?: boolean;
92+
overshootFriction?: number;
93+
onSwipeableLeftOpen?: () => void;
94+
onSwipeableRightOpen?: () => void;
95+
onSwipeableOpen?: () => void;
96+
onSwipeableClose?: () => void;
97+
onSwipeableLeftWillOpen?: () => void;
98+
onSwipeableRightWillOpen?: () => void;
99+
onSwipeableWillOpen?: () => void;
100+
onSwipeableWillClose?: () => void;
101+
children?: React.ReactNode;
102+
renderLeftActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
103+
renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
104+
useNativeAnimations?: boolean;
105+
animationOptions?: Record<string, unknown>;
106+
containerStyle?: StyleProp<ViewStyle>;
107+
childrenContainerStyle?: StyleProp<ViewStyle>;
108+
}
109+
```

0 commit comments

Comments
 (0)