React Native滚轮选择器实现遇阻，求解决方案

核心问题修正思路 #

• 将选中边框（灰色线条）固定在可视区域中心，不随滚动元素移动
• 基于单个Animated.Value控制Y轴偏移，动态计算每个选项的位置、透明度
• 处理手势释放后的自动对齐逻辑，将选中项吸附到中心位置

修改后的完整代码 #

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

const ITEM_HEIGHT = 40; // 每个选项的固定高度
const VISIBLE_ITEM_COUNT = 5; // 可视区域内显示的选项数量

export default (props) => {
  const { values = [] } = props;
  const [currentIndex, setCurrentIndex] = useState(0);
  const scrollOffset = useRef(new Animated.Value(0)).current;

  // 初始化手势响应器
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        scrollOffset.setOffset(scrollOffset._value);
      },
      onPanResponderMove: Animated.event(
        [null, { dy: scrollOffset }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: (_, gesture) => {
        scrollOffset.flattenOffset();
        // 计算需要对齐的目标索引
        const step = Math.round(gesture.dy / ITEM_HEIGHT);
        const targetIndex = Math.max(0, Math.min(values.length - 1, currentIndex - step));
        
        // 动画回到目标位置
        Animated.spring(scrollOffset, {
          toValue: (targetIndex - currentIndex) * ITEM_HEIGHT,
          useNativeDriver: false,
          bounciness: 0,
        }).start(() => {
          setCurrentIndex(targetIndex);
          scrollOffset.setValue(0); // 重置偏移，方便下次手势操作
        });
      },
    })
  ).current;

  // 为每个选项计算动态样式：位置、透明度
  const getDynamicItemStyle = (indexOffset) => {
    const translateY = scrollOffset.interpolate({
      inputRange: [-ITEM_HEIGHT, 0, ITEM_HEIGHT],
      outputRange: [
        indexOffset * ITEM_HEIGHT - ITEM_HEIGHT,
        indexOffset * ITEM_HEIGHT,
        indexOffset * ITEM_HEIGHT + ITEM_HEIGHT,
      ],
      extrapolate: 'clamp',
    });

    const opacity = scrollOffset.interpolate({
      inputRange: [-ITEM_HEIGHT * 2, -ITEM_HEIGHT, 0, ITEM_HEIGHT, ITEM_HEIGHT * 2],
      outputRange: [0, 0.3, 1, 0.3, 0],
      extrapolate: 'clamp',
    });

    return {
      position: 'absolute',
      top: 0,
      width: '100%',
      translateY,
      opacity,
    };
  };

  // 渲染可视范围内的选项
  const renderVisibleItems = () => {
    const items = [];
    // 显示当前选中项前后各2个选项
    for (let i = -2; i <= 2; i++) {
      const targetIndex = currentIndex + i;
      if (targetIndex < 0 || targetIndex >= values.length) continue;
      
      items.push(
        <Animated.Text
          key={targetIndex}
          style={[style.textItem, getDynamicItemStyle(i)]}
        >
          {values[targetIndex]}
        </Animated.Text>
      );
    }
    return items;
  };

  return (
    <View style={style.container}>
      {/* 固定的选中边框（灰色线条） */}
      <View style={style.selectionBorder} />
      {/* 可滚动的选项容器 */}
      <Animated.View
        {...panResponder.panHandlers}
        style={style.scrollContainer}
      >
        {renderVisibleItems()}
      </Animated.View>
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: 'orange',
    width: '80%',
    height: ITEM_HEIGHT * VISIBLE_ITEM_COUNT,
    overflow: 'hidden',
    position: 'relative',
  },
  scrollContainer: {
    position: 'absolute',
    top: ITEM_HEIGHT * 2, // 让初始选中项居中
    width: '100%',
  },
  selectionBorder: {
    position: 'absolute',
    top: ITEM_HEIGHT * 2,
    left: 0,
    right: 0,
    height: ITEM_HEIGHT,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#444742',
    pointerEvents: 'none', // 不拦截手势操作
  },
  textItem: {
    textAlign: 'center',
    color: '#f3f4f8',
    fontSize: 28,
    height: ITEM_HEIGHT,
    lineHeight: ITEM_HEIGHT,
  },
});

关键改动说明 #

• 固定选中边框：将灰色线条放在外层容器，通过绝对定位固定在可视区域中心，pointerEvents: 'none'确保不干扰手势操作
• 单轴动画控制：用Animated.Value替代ValueXY，专注处理Y轴滚动，简化逻辑计算
• 动态样式生成：通过interpolate方法，根据滚动偏移量实时计算每个选项的位置和透明度，实现滚动渐变效果
• 自动对齐逻辑：手势释放时，根据滑动距离计算目标选中项，通过弹簧动画将选项吸附到中心，同时更新选中索引
• 可视区域裁剪：外层容器设置overflow: 'hidden'，确保仅橙色框内的内容可见

内容的提问来源于stack exchange，提问作者code writer 3000