如何在react native 0.63.4中实现可滑动显示对应数值的水平重量秤组件

核心实现逻辑 #

• 基于核心内置ScrollView组件承载水平滚动的刻度体系，无额外第三方依赖，完全适配0.63.4版本的API能力
• 固定选中标识线在滚动容器的水平居中位置，模拟重量秤的定位视觉效果
• 滚动过程中实时计算当前居中位置对应的刻度值，同步更新界面展示的重量数值
• 支持滚动结束自动吸附到最近刻度，匹配原生交互手感

完整实现代码 #

首先导入基础依赖，配置全局常量：

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

// 全局配置项：可根据实际需求调整
const SCREEN_WIDTH = Dimensions.get('window').width;
const ITEM_WIDTH = 10; // 单个刻度单元的宽度
const MIN_WEIGHT = 30; // 可选重量下限
const MAX_WEIGHT = 150; // 可选重量上限
const WEIGHT_STEP = 1; // 每格代表的重量增量

编写组件核心逻辑：

const WeightScrollBar = () => {
  // 状态：当前选中的重量值
  const [currentWeight, setCurrentWeight] = useState(60);
  // ref：绑定ScrollView实例，用于控制滚动位置
  const scrollViewRef = useRef(null);
  // 计算总刻度数量
  const totalTicks = (MAX_WEIGHT - MIN_WEIGHT) / WEIGHT_STEP;
  // 计算刻度内容的总宽度
  const scrollContentWidth = totalTicks * ITEM_WIDTH;

  // 滚动过程中实时计算对应重量
  const handleScroll = (event) => {
    const offsetX = event.nativeEvent.contentOffset.x;
    const tickIndex = Math.round(offsetX / ITEM_WIDTH);
    const weight = MIN_WEIGHT + tickIndex * WEIGHT_STEP;
    // 边界兜底，避免越界数值
    if (weight >= MIN_WEIGHT && weight <= MAX_WEIGHT) {
      setCurrentWeight(weight);
    }
  };

  // 滚动结束后自动吸附到最近刻度
  const handleMomentumScrollEnd = (event) => {
    const offsetX = event.nativeEvent.contentOffset.x;
    const targetOffset = Math.round(offsetX / ITEM_WIDTH) * ITEM_WIDTH;
    scrollViewRef.current?.scrollTo({
      x: targetOffset,
      animated: true
    })
  };

  return (
    <View style={styles.container}>
      {/* 顶部展示的当前重量大数值 */}
      <Text style={styles.weightDisplayText}>
        {currentWeight} <Text style={styles.unitText}>kg</Text>
      </Text>

      {/* 水平滚动刻度区域 */}
      <View style={styles.scrollWrapper}>
        {/* 固定在中心的选中标识线 */}
        <View style={styles.centerIndicator} />
        <ScrollView
          ref={scrollViewRef}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          onScroll={handleScroll}
          onMomentumScrollEnd={handleMomentumScrollEnd}
          // 配置滚动事件触发频率，适配0.63.4版本能力，匹配屏幕刷新率
          scrollEventThrottle={16}
          contentContainerStyle={{
            width: scrollContentWidth,
            // 左右留出边距，让首尾刻度可以滚动到屏幕中心位置
            paddingHorizontal: SCREEN_WIDTH / 2 - ITEM_WIDTH / 2
          }}
        >
          {/* 遍历生成所有刻度 */}
          {Array.from({length: totalTicks + 1}).map((_, index) => {
            // 每10格显示长刻度和重量数值，其余显示短刻度
            const isLongTick = index % 10 === 0;
            return (
              <View key={index} style={styles.tickItem}>
                <View style={[
                  styles.tick,
                  {height: isLongTick ? 30 : 15}
                ]} />
                {isLongTick && (
                  <Text style={styles.tickLabel}>
                    {MIN_WEIGHT + index * WEIGHT_STEP}
                  </Text>
                )}
              </View>
            )
          })}
        </ScrollView>
      </View>
    </View>
  )
}

编写对应样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingVertical: 40,
  },
  weightDisplayText: {
    fontSize: 48,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#222',
    marginBottom: 60,
  },
  unitText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: '#666'
  },
  scrollWrapper: {
    height: 80,
    position: 'relative'
  },
  centerIndicator: {
    position: 'absolute',
    left: SCREEN_WIDTH / 2 - 1.5,
    top: 0,
    width: 3,
    height: 80,
    backgroundColor: '#2196F3',
    zIndex: 10
  },
  tickItem: {
    width: ITEM_WIDTH,
    height: 80,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  tick: {
    width: 2,
    backgroundColor: '#999',
  },
  tickLabel: {
    fontSize: 12,
    color: '#666',
    marginTop: 4
  }
})

0.63.4版本适配注意点 #

• 不要使用新架构专属的动画Hook、新版手势系统API，以上代码全部基于核心组件实现，无版本兼容风险
• 若需要自定义视觉效果，可通过调整刻度高度、标识线颜色、重量范围常量快速匹配设计稿
• 若出现滚动卡顿，可适当调高scrollEventThrottle的数值，平衡更新频率和流畅度

内容的提问来源于stack exchange，提问作者Robin Shao