无法为@ptomasroos/react-native-multi-slider设置轨道及滑块样式

• 你之前设置的trackStyle是用来调整轨道样式的，而你要修改的是**滑块（thumb）**的颜色，得用专门的滑块样式属性才行。

• 直接用thumbStyle设置滑块基础颜色：

  <MultiSlider
      values={sliderValue.map(unscaleValue)}
      min={0}
      max={100}
      onValuesChange={handleValuesChange}
      allowOverlap
      snapped
      step={1} // Step size on the non-linear scale, not actual value step
      trackStyle={{ height: sH * 0.005, backgroundColor: 'green' }}
      thumbStyle={{ backgroundColor: '#008080' }} // 这里设置目标滑块颜色
  />
  

• 如果需要区分滑块选中/未选中状态的样式，用selectedThumbStyle单独配置选中状态：

  <MultiSlider
      // 其他属性保持不变
      thumbStyle={{ backgroundColor: '#cccccc' }} // 未选中滑块的颜色
      selectedThumbStyle={{ backgroundColor: '#008080' }} // 选中滑块的颜色
  />
  

• 要是默认滑块样式不够用，还可以用customThumb传入自定义组件实现更复杂的外观：

  // 自定义滑块组件
  const CustomThumb = ({ index, value, isSelected }) => (
      <View style={{
          width: 20,
          height: 20,
          borderRadius: 10,
          backgroundColor: isSelected ? '#008080' : '#cccccc',
          borderWidth: 2,
          borderColor: '#ffffff',
          shadowColor: '#000000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.2,
      }} />
  );
  
  // 引用自定义滑块
  <MultiSlider
      // 其他属性保持不变
      customThumb={CustomThumb}
  />
  

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