如何在React Native中启用滑动操作，实现列表对象切换？

一、原生组件实现（无需额外依赖） #

1. 使用ScrollView（简单快捷） #

利用ScrollView的horizontal和pagingEnabled属性实现横向分页滑动，通过onMomentumScrollEnd事件计算当前索引，更新显示的对象。

示例代码：

import { useState } from 'react';
import { ScrollView, View, Text, Dimensions } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');
const data = [{ id: 1, content: '对象1' }, { id: 2, content: '对象2' }, { id: 3, content: '对象3' }];

export default function SwipeExample() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleScrollEnd = (event) => {
    const index = Math.round(event.nativeEvent.contentOffset.x / screenWidth);
    setCurrentIndex(index);
  };

  return (
    <ScrollView
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
      onMomentumScrollEnd={handleScrollEnd}
      style={{ flex: 1 }}
    >
      {data.map((item, index) => (
        <View key={item.id} style={{ width: screenWidth, justifyContent: 'center', alignItems: 'center', flex: 1 }}>
          <Text style={{ fontSize: 24 }}>{item.content}</Text>
          {/* 放置原点击逻辑对应的内容组件 */}
        </View>
      ))}
    </ScrollView>
  );
}

2. 使用PanResponder（自定义滑动逻辑） #

如果需要更精细的滑动控制（比如设置触发切换的距离阈值），可以用PanResponder监听手势动作：

示例代码：

import { useState, useRef } from 'react';
import { View, Text, PanResponder, Animated } from 'react-native';

const data = [{ id: 1, content: '对象1' }, { id: 2, content: '对象2' }, { id: 3, content: '对象3' }];
const SWIPE_THRESHOLD = 100; // 触发切换的最小滑动距离

export default function PanResponderSwipe() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const panX = useRef(new Animated.Value(0)).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (_, gestureState) => {
        panX.setValue(gestureState.dx);
      },
      onPanResponderRelease: (_, gestureState) => {
        if (gestureState.dx > SWIPE_THRESHOLD && currentIndex > 0) {
          // 右滑切换上一个对象
          setCurrentIndex(prev => prev - 1);
        } else if (gestureState.dx < -SWIPE_THRESHOLD && currentIndex < data.length - 1) {
          // 左滑切换下一个对象
          setCurrentIndex(prev => prev + 1);
        }
        Animated.spring(panX, {
          toValue: 0,
          useNativeDriver: true,
        }).start();
      },
    })
  ).current;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        {...panResponder.panHandlers}
        style={{
          transform: [{ translateX: panX }],
          padding: 20,
          backgroundColor: '#f0f0f0',
          borderRadius: 8,
        }}
      >
        <Text style={{ fontSize: 24 }}>{data[currentIndex].content}</Text>
        {/* 放置原点击逻辑对应的内容组件 */}
      </Animated.View>
    </View>
  );
}

二、第三方工具包 #

1. react-native-gesture-handler + react-native-reanimated #

官方推荐的手势处理组合，支持复杂手势场景：

先安装依赖：

npm install react-native-gesture-handler react-native-reanimated

示例代码（使用GestureDetector）：

import { useState } from 'react';
import { View, Text } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';

const data = [{ id: 1, content: '对象1' }, { id: 2, content: '对象2' }, { id: 3, content: '对象3' }];
const SWIPE_THRESHOLD = 100;

export default function GestureHandlerSwipe() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const offsetX = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(0) }],
  }));

  const swipeGesture = Gesture.Pan()
    .onEnd((event) => {
      if (event.translationX > SWIPE_THRESHOLD && currentIndex > 0) {
        setCurrentIndex(prev => prev - 1);
      } else if (event.translationX < -SWIPE_THRESHOLD && currentIndex < data.length - 1) {
        setCurrentIndex(prev => prev + 1);
      }
    });

  return (
    <GestureDetector gesture={swipeGesture}>
      <Animated.View style={[offsetX, { flex: 1, justifyContent: 'center', alignItems: 'center' }]}>
        <Text style={{ fontSize: 24 }}>{data[currentIndex].content}</Text>
        {/* 放置原点击逻辑对应的内容组件 */}
      </Animated.View>
    </GestureDetector>
  );
}

2. react-native-swiper #

开箱即用的轮播滑动组件，适合快速实现需求：

先安装依赖：

npm install react-native-swiper

示例代码：

import { useState } from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

const data = [{ id: 1, content: '对象1' }, { id: 2, content: '对象2' }, { id: 3, content: '对象3' }];

export default function SwiperExample() {
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <Swiper
      loop={false}
      onIndexChanged={(index) => setCurrentIndex(index)}
      showsPagination={false}
      style={{ flex: 1 }}
    >
      {data.map((item) => (
        <View key={item.id} style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
          <Text style={{ fontSize: 24 }}>{item.content}</Text>
          {/* 放置原点击逻辑对应的内容组件 */}
        </View>
      ))}
    </Swiper>
  );
}

可根据场景选择方案：轻量需求优先原生ScrollView；需自定义手势逻辑选PanResponder或Gesture Handler组合；快速实现轮播效果用react-native-swiper。

内容的提问来源于stack exchange，提问作者Wizard Chiboy