如何使用react-native-deck-swiper实现按钮控制图片滑动？

我正在开发一款类似Tinder的React Native应用，使用react-native-deck-swiper组件，尝试通过按钮控制图片左右滑动但未成功，当前代码如下：

<Swiper
        ref={swiper => {
          swiper = swiper;
        }}
        containerStyle={{backgroundColor: 'transparent'}}
        onSwiped={() => onSwiped('general')}
        onSwipedLeft={() => onSwiped('left')}
        onSwipedRight={() => onSwiped('right')}
        onSwipedTop={() => onSwiped('top')}
        onSwipedBottom={() => onSwiped('bottom')}
        onTapCard={swipeLeft}
        cards={Cards}
        cardIndex={cardIndex}
        animateCardOpacity
        cardVerticalMargin={240}
        renderCard={renderCard}
        onSwipedAll={onSwipedAllCards}
        stackSize={3}
        showSecondCard={false}
        stackSeparation={15}
        overlayLabels={{
          bottom: {
            title: 'BLEAH',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            },
          },
          left: {
            title: 'NOPE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'flex-end',
                justifyContent: 'flex-start',
                marginTop: 30,
                marginLeft: -30,
              },
            },
          },
          right: {
            title: 'LIKE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'flex-start',
                justifyContent: 'flex-start',
                marginTop: 30,
                marginLeft: 30,
              },
            },
          },
          top: {
            title: 'SUPER LIKE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            },
          },
        }}
        animateOverlayLabelsOpacity
        swipeBackCard>
        <View style={styles.mysliderBtn}>
          <TouchableOpacity
            style={{
              backgroundColor: 'pink',
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 35,
            }}
            onPress={() => {
              onSwiped('left');
            }}>
            <Entypo name="cross" size={30} color={'#fff'} />
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              backgroundColor: 'green',
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 35,
            }}
            onPress={() => {
              onSwiped('right');
            }}>
            <AntDesign name="hearto" size={30} color={'#fff'} />
          </TouchableOpacity>
        </View>
      </Swiper>

问题分析 #

• Ref保存错误：当前ref的赋值方式swiper => { swiper = swiper; }无法正确保存组件实例，导致无法调用swiper的内置滑动方法。
• 按钮逻辑缺失：按钮onPress仅调用了自定义的onSwiped回调，没有触发swiper组件的滑动动画和卡片索引变更，所以看不到滑动效果。

修复方案 #

核心步骤 #

1. 正确使用Ref保存swiper实例：用useRef（函数组件）或createRef（类组件）获取swiper的引用。
2. 调用swiper内置滑动方法：直接调用组件提供的swipeLeft()、swipeRight()方法，触发对应方向的滑动动画并自动更新卡片索引。
3. 统一回调逻辑：滑动完成后的业务逻辑（如状态更新、接口请求）放在onSwipedLeft、onSwipedRight等组件回调中，避免重复代码。

修改后的完整代码 #

import React, { useRef } from 'react';
import { View, TouchableOpacity } from 'react-native';
import Swiper from 'react-native-deck-swiper';
import Entypo from '@expo/vector-icons/Entypo';
import AntDesign from '@expo/vector-icons/AntDesign';

// 假设已定义Cards、cardIndex、onSwiped、onSwipedAllCards、renderCard、styles等变量
const TinderLikeSwiper = () => {
  // 1. 使用useRef保存swiper实例
  const swiperRef = useRef(null);

  return (
    <Swiper
      ref={swiperRef}
      containerStyle={{backgroundColor: 'transparent'}}
      onSwiped={() => onSwiped('general')}
      onSwipedLeft={() => onSwiped('left')}
      onSwipedRight={() => onSwiped('right')}
      onSwipedTop={() => onSwiped('top')}
      onSwipedBottom={() => onSwiped('bottom')}
      onTapCard={() => swiperRef.current?.swipeLeft()}
      cards={Cards}
      cardIndex={cardIndex}
      animateCardOpacity
      cardVerticalMargin={240}
      renderCard={renderCard}
      onSwipedAll={onSwipedAllCards}
      stackSize={3}
      showSecondCard={false}
      stackSeparation={15}
      overlayLabels={{
        bottom: {
          title: 'BLEAH',
          style: {
            label: {
              backgroundColor: 'black',
              borderColor: 'black',
              color: 'white',
              borderWidth: 1,
            },
            wrapper: {
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            },
          },
        },
        left: {
          title: 'NOPE',
          style: {
            label: {
              backgroundColor: 'black',
              borderColor: 'black',
              color: 'white',
              borderWidth: 1,
            },
            wrapper: {
              flexDirection: 'column',
              alignItems: 'flex-end',
              justifyContent: 'flex-start',
              marginTop: 30,
              marginLeft: -30,
            },
          },
        },
        right: {
          title: 'LIKE',
          style: {
            label: {
              backgroundColor: 'black',
              borderColor: 'black',
              color: 'white',
              borderWidth: 1,
            },
            wrapper: {
              flexDirection: 'column',
              alignItems: 'flex-start',
              justifyContent: 'flex-start',
              marginTop: 30,
              marginLeft: 30,
            },
          },
        },
        top: {
          title: 'SUPER LIKE',
          style: {
            label: {
              backgroundColor: 'black',
              borderColor: 'black',
              color: 'white',
              borderWidth: 1,
            },
            wrapper: {
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            },
          },
        },
      }}
      animateOverlayLabelsOpacity
      swipeBackCard>
      <View style={styles.mysliderBtn}>
        <TouchableOpacity
          style={{
            backgroundColor: 'pink',
            height: 60,
            width: 60,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 35,
          }}
          onPress={() => {
            // 调用左滑方法
            swiperRef.current?.swipeLeft();
          }}>
          <Entypo name="cross" size={30} color={'#fff'} />
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            backgroundColor: 'green',
            height: 60,
            width: 60,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 35,
          }}
          onPress={() => {
            // 调用右滑方法
            swiperRef.current?.swipeRight();
          }}>
          <AntDesign name="hearto" size={30} color={'#fff'} />
        </TouchableOpacity>
      </View>
    </Swiper>
  );
};

export default TinderLikeSwiper;

关键说明 #

• swiperRef.current?.swipeLeft()：使用可选链操作符避免ref未初始化时的报错，确保实例存在才调用方法。
• 类组件适配：将useRef替换为this.swiperRef = React.createRef()，调用时用this.swiperRef.current?.swipeLeft()即可。
• 业务逻辑统一：滑动后的处理逻辑全部放在组件的onSwipedLeft、onSwipedRight回调中，保持代码一致性。

内容的提问来源于stack exchange，提问作者parveen kumar