如何在React Native中实现可聚焦放大的横向年龄选择列表

可选实现方案 #

• 第三方库快速接入
  优先选择已经封装好滚动动效的组件库，减少自定义开发成本：
  • react-native-reanimated-carousel：专门做横向滚动动效的组件，自带居中缩放配置，只需要将每个轮播项设置为年龄数字，调整scale参数即可实现聚焦放大效果，适配iOS/Android双端。
  • react-native-wheel-pick：支持横向滚轮模式，可自定义选中态的字体大小和样式，开箱即用。
• 自定义原生组件实现
  如果需要完全控制样式逻辑，可以自己基于基础组件开发：
  1. 基础滚动容器用横向ScrollView，开启snapToAlignment="center"、设置snapToInterval为单个年龄条目的宽度，实现滚动后自动对齐居中的效果。
  2. 绑定onScroll事件实时获取x轴滚动偏移量，计算当前居中的条目标索引：currentIndex = Math.round(scrollX / itemWidth)。
  3. 渲染每个年龄数字时，判断当前索引是否为聚焦索引，给对应条目加transform: [{scale: 1.5}]（缩放倍数可自定义）的样式，配合Animated动画API实现缩放过渡效果，避免样式跳转生硬。

注意要给ScrollView的首尾添加和视口一半宽度相等的内边距，保证第一个和最后一个年龄条目也可以滚动到居中位置。

内容的提问来源于stack exchange，提问作者Daniel Döbereiner