如何为react-native-slider的最大取值10添加+符号后缀

• 现有Slider组件逻辑无需改动，仅需调整数值展示层的判断逻辑即可。你已经通过onValueChange回调将滑块0_{1的取值映射为了0}10的整数存储在range状态中，直接在渲染数值的位置追加判断即可实现需求。
• 建议将onValueChange中的parseInt替换为Math.round，避免浮点数精度问题导致的取值异常。

完整示例代码 #

import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Slider from 'react-native-slider';

export default function SliderDemo() {
  const [range, setRange] = useState(1);

  return (
    <View style={styles.container}>
      <Slider
        style={styles.slider}
        minimumValue={0}
        maximumValue={1}
        minimumTrackTintColor="#ff6700"
        maximumTrackTintColor="#999999"
        thumbTintColor="#ff6700"
        step={0.1}
        value={1}
        onValueChange={value => setRange(Math.round(value * 10))}
      />
      {/* 数值显示位置追加判断 */}
      <Text style={styles.valueText}>
        {range === 10 ? '10+' : range}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  slider: {
    width: '100%',
    height: 40,
  },
  valueText: {
    marginTop: 10,
    fontSize: 16,
    textAlign: 'center',
  }
});

如果后续需要让10+对应更大的数值区间，仅需要修改onValueChange的映射逻辑，保留展示层的判断即可，无需调整其他代码。

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