使用 react-native-slider 的最大和最小轨道色调的不同高度

Question

目前库https://www.npmjs.com/package/@miblanchard/react-native-slider 没有能够改变拇指左右色调高度的解决方案。

如何实施？

Answer 1

我找到了解决方法：

1. Slider 所在的容器应该有overflow style: "hidden"

2. 我使用 renderThumbComponent 将拇指左线显示到左侧

    renderThumbComponent={() => (
      <>
        <View style={styles.thickerLine} />
        <View style={styles.thumb} />
      </>
    )}
   

3. 我将thickerLine 的样式设置为尽可能宽，使其超出容器。

    thickerLine: {
      position: "absolute",
      top: 8,
      right: 0,
      backgroundColor: "blue",
      height: 4,
      width: window.width,
    },
   

   是的，我知道这很疯狂，但它有效！