fix:Swipeable优化

ChenlingasMx · ChenlingasMx · commit 6e1fd76a4d48 · 2021-10-12T20:00:09.000+08:00
diff --git a/example/examples/src/routes/SwipeAction/index.tsx b/example/examples/src/routes/SwipeAction/index.tsx
@@ -9,22 +9,44 @@ const {Header, Body, Card, Footer} = Layout;
 export interface SwipeActionProps extends ComProps {}
 
 export default class SwipeActionView extends Component<SwipeActionProps> {
+  newRef: any;
   render() {
     const {route} = this.props;
     const description = route.params.description;
     const title = route.params.title;
     const right = [
       {
-        text: 'More',
+        text: '查看备注',
         color: 'orange',
         x: 250,
-        onPress: () => {},
+        onPress: () => {
+          this.newRef?.swipeable?.close();
+        },
       },
       {
-        text: 'Delete',
+        text: '删除',
         color: 'red',
         x: 400,
-        onPress: () => {},
+        onPress: () => {
+          this.newRef?.swipeable?.close();
+        },
+      },
+      {
+        text: '不显示',
+        color: 'green',
+        x: 400,
+        onPress: () => {
+          this.newRef?.swipeable?.close();
+        },
+      },
+    ];
+    const left = [
+      {
+        text: '左侧查看',
+        color: 'pink',
+        onPress: () => {
+          this.newRef?.swipeable?.close();
+        },
       },
     ];
     return (
@@ -34,11 +56,12 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
           <Body>
             <Card title="左右滑动，显示按钮" style={styles.card}>
               <SwipeAction
+                ref={ref => (this.newRef = ref)}
                 right={right}
-                onSwipeableRightOpen={() => {
-                  console.log('right');
-                }}>
-                <View style={styles.view}>
+                left={left}
+                onSwipeableRightOpen={() => console.log('right')}
+                onSwipeableLeftOpen={() => () => console.log('left')}>
+                <View style={[styles.view]}>
                   <Text>滑动</Text>
                 </View>
               </SwipeAction>
diff --git a/packages/core/src/SwipeAction/README.md b/packages/core/src/SwipeAction/README.md
@@ -15,26 +15,49 @@ import { ComProps } from '../../routes';
 
 const { Header, Body, Card, Footer } = Layout;
 
-export interface SwipeActionProps extends ComProps { }
+export interface SwipeActionProps extends ComProps {
+}
 
 export default class SwipeActionView extends Component<SwipeActionProps> {
+  newRef: any;
   render() {
     const { route } = this.props;
     const description = route.params.description;
     const title = route.params.title;
     const right = [
       {
-        text: 'More',
-        color: "orange",
+        text: '查看备注',
+        color: 'orange',
         x: 250,
-        onPress: () => { },
+        onPress: () => {
+          this.newRef?.swipeable?.close()
+        },
+      },
+      {
+        text: '删除',
+        color: 'red',
+        x: 400,
+        onPress: () => {
+          this.newRef?.swipeable?.close()
+        },
       },
       {
-        text: 'Delete',
-        color: "red",
+        text: '不显示',
+        color: 'green',
         x: 400,
-        onPress: () => { },
-      }
+        onPress: () => {
+          this.newRef?.swipeable?.close()
+        },
+      },
+    ];
+    const left = [
+      {
+        text: '左侧查看',
+        color: 'pink',
+        onPress: () => {
+          this.newRef?.swipeable?.close()
+        },
+      },
     ];
     return (
       <Container>
@@ -43,9 +66,13 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
           <Body>
             <Card title="左右滑动，显示按钮" style={styles.card}>
               <SwipeAction
+                ref={ref => this.newRef = ref}
                 right={right}
+                left={left}
+                onSwipeableRightOpen={() => console.log('right')}
+                onSwipeableLeftOpen={() => () => console.log('left')}
               >
-                <View style={styles.view}>
+                <View style={[styles.view]}>
                   <Text>滑动</Text>
                 </View>
               </SwipeAction>
@@ -66,7 +93,7 @@ const styles = StyleSheet.create({
     paddingBottom: 30,
   },
   view: {
-    height: 30,
+    height: 30
   },
 });
 
diff --git a/packages/core/src/SwipeAction/index.tsx b/packages/core/src/SwipeAction/index.tsx
@@ -1,15 +1,20 @@
 import React, { useImperativeHandle, forwardRef, useRef } from 'react';
-import { Animated, StyleSheet, View, Text, I18nManager, StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleSheet, View, Text, I18nManager, StyleProp, ViewStyle, Dimensions } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 
 export interface SwipeActionProps {
-  right: Array<{
+  right?: Array<{
     text: string;
     color: string;
     x?: number;
     onPress?: () => void;
   }>;
+  left?: Array<{
+    text: string;
+    color: string;
+    onPress?: () => void;
+  }>;
   enableTrackpadTwoFingerGesture?: boolean;
   friction?: number;
   leftThreshold?: number;
@@ -41,11 +46,10 @@ export interface SwipeActionProps {
 }
 
 const SwipeAction = (props: SwipeActionProps, ref: any) => {
-  const { children, right = [], ...others } = props;
-  const swipeableRef: any = useRef(null);
-
-  const close = () => swipeableRef?.current?.close();
+  const { children, right = [], left = [], ...others } = props;
+  const swipeableRef: React.MutableRefObject<null> = useRef(null);
 
+  // 右侧滑出
   const renderRightAction = (progress: Animated.AnimatedInterpolation) => {
     return (
       right &&
@@ -58,7 +62,40 @@ const SwipeAction = (props: SwipeActionProps, ref: any) => {
         return (
           <View
             style={{
-              width: 60,
+              width: '20%',
+              flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+            }}
+          >
+            <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }} key={idx}>
+              <RectButton
+                style={[styles.rightAction, { backgroundColor: color }]}
+                onPress={() => {
+                  onPress && onPress();
+                }}
+              >
+                <Text style={styles.actionText}>{text}</Text>
+              </RectButton>
+            </Animated.View>
+          </View>
+        );
+      })
+    );
+  };
+  // 左侧滑出
+  const renderLeftAction = (progress: Animated.AnimatedInterpolation, dragX: any) => {
+    return (
+      left &&
+      left.length > 0 &&
+      left.map(({ text, color, onPress }, idx) => {
+        const trans = dragX.interpolate({
+          inputRange: [0, 50, 100, 101],
+          outputRange: [-20, 0, 0, 1],
+          extrapolate: 'clamp',
+        });
+        return (
+          <View
+            style={{
+              width: '20%',
               flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
             }}
           >
@@ -67,7 +104,6 @@ const SwipeAction = (props: SwipeActionProps, ref: any) => {
                 style={[styles.rightAction, { backgroundColor: color }]}
                 onPress={() => {
                   onPress && onPress();
-                  close();
                 }}
               >
                 <Text style={styles.actionText}>{text}</Text>
@@ -79,9 +115,9 @@ const SwipeAction = (props: SwipeActionProps, ref: any) => {
     );
   };
 
-  // 暴露给父组件调用的方法
-  useImperativeHandle(ref, (): any => ({
-    close: close,
+  // 暴露给父组件调用 Swipeable上的方法
+  useImperativeHandle(ref, () => ({
+    swipeable: swipeableRef.current,
   }));
 
   return (
@@ -90,8 +126,10 @@ const SwipeAction = (props: SwipeActionProps, ref: any) => {
       friction={2}
       enableTrackpadTwoFingerGesture
       rightThreshold={50}
+      leftThreshold={50}
       overshootRight={false}
       renderRightActions={renderRightAction}
+      renderLeftActions={renderLeftAction}
       {...others}
     >
       {children && children}
