@uiw/react-native/lib/SwipeAction/index.js

UIW for React Native

import React, { useImperativeHandle, forwardRef, useRef } from 'react';
import { Animated, StyleSheet, View, Text, I18nManager } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const SwipeAction = (props, ref) => {
    const { right = [], left = [], buttonWidth = 60, children, actionViewStyle, rectButtonStyle, ...others } = props;
    const swipeableRef = useRef(null);
    useImperativeHandle(ref, () => ({ swipeable: swipeableRef.current }));
    // 滑出
    const renderRightAction = (progress, dragX, isLeft = true) => {
        const buttons = isLeft ? left : right;
        if (!buttons) {
            return null;
        }
        const length = buttons.length;
        const width = buttonWidth * length;
        return (<View style={[styles.viewActions, { width: width, ...actionViewStyle }]}>
        {buttons &&
                buttons.map(({ text, color, onPress, disabled, render }, idx) => {
                    const x = isLeft ? -idx * buttonWidth : (length - idx) * buttonWidth;
                    const trans = progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [x, 0],
                        extrapolate: 'clamp',
                    });
                    return (<Animated.View key={idx} style={{ flex: 1, transform: [{ translateX: trans }] }}>
                <RectButton style={[styles.rightAction, { backgroundColor: color, ...rectButtonStyle }]} onPress={() => {
                            if (disabled && disabled) {
                                return;
                            }
                            else {
                                onPress && onPress();
                            }
                        }}>
                  {React.isValidElement(render) ? (render(text, right[idx], idx)) : (<Text style={[styles.actionText]}>{text}</Text>)}
                </RectButton>
              </Animated.View>);
                })}
      </View>);
    };
    const commonProps = {
        ref: swipeableRef,
        friction: 2,
        enableTrackpadTwoFingerGesture: true,
        rightThreshold: 40,
        renderRightActions: (progress, dragX) => renderRightAction(progress, dragX, false),
        renderLeftActions: (progress, dragX) => renderRightAction(progress, dragX, true),
        ...others,
    };
    return <Swipeable {...commonProps}>{children && children}</Swipeable>;
};
const styles = StyleSheet.create({
    actionText: {
        color: 'white',
        fontSize: 16,
        backgroundColor: 'transparent',
        textAlign: 'center',
    },
    rightAction: {
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
    },
    viewActions: {
        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
    },
});
export default forwardRef(SwipeAction);