如何修改React Native Slider默认背景及禁用状态下的颜色？

1. 如何修改React Native Slider的默认背景？ #

对于react-native-community/slider组件，它的背景样式主要靠两个核心属性直接控制，改起来很直观：

• minimumTrackTintColor：控制滑块已选中区域（从最小值到当前value的部分）的背景色
• maximumTrackTintColor：控制滑块未选中区域（从当前value到最大值的部分）的背景色

你代码里已经设置了minimumTrackTintColor="#ebff64"和maximumTrackTintColor="grey"，这其实就是在修改默认背景啦。如果想要整个滑块背景统一成同一种颜色，只需要把这两个属性设为相同值就行：

<Slider
  minimumTrackTintColor="#yourTargetColor"
  maximumTrackTintColor="#yourTargetColor"
  // 其他属性保持不变
/>

要是还想给滑块加额外的视觉效果（比如圆角、阴影），可以把Slider包在一个View里，给这个View设置样式：

<View style={{ borderRadius: 8, overflow: 'hidden', backgroundColor: '#f5f5f5' }}>
  <Slider
    // 你的Slider属性...
  />
</View>

2. 禁用状态下保持滑块原有样式 #

设置disabled={true}后，组件会自动套用禁用态的默认灰化样式，直接改库代码确实麻烦，这里给你两个实用的解决办法：

方案一：模拟禁用状态（首推） #

不用组件自带的disabled属性，而是手动拦截用户的交互操作，这样样式会完全保留正常状态的样子：

<Slider
  thumbTintColor="#ebff64"
  maximumTrackTintColor="grey"
  minimumTrackTintColor="#ebff64"
  style={styles.seekBar}
  step={1}
  minimumValue={0}
  maximumValue={this.state.duration}
  value={this.state.currentTime}
  // 去掉disabled属性，添加这两个事件拦截拖动操作
  onTouchStart={(e) => e.preventDefault()}
  onTouchMove={(e) => e.preventDefault()}
/>

这样用户完全没法拖动滑块，但所有样式都和未禁用时一模一样，完美匹配你的需求。

方案二：强制覆盖禁用样式（进阶） #

如果需要更灵活的控制，可以用thumbStyle、minimumTrackStyle等属性强制覆盖禁用态样式，不过不同平台可能有差异，比如iOS上禁用样式优先级较高，需要结合平台判断：

import { Platform } from 'react-native';

<Slider
  disabled={true}
  thumbTintColor="#ebff64"
  maximumTrackTintColor="grey"
  minimumTrackTintColor="#ebff64"
  style={styles.seekBar}
  step={1}
  minimumValue={0}
  maximumValue={this.state.duration}
  value={this.state.currentTime}
  // 强制覆盖禁用时的滑块和轨道样式
  thumbStyle={{
    backgroundColor: Platform.OS === 'ios' ? '#ebff64' : undefined,
  }}
  minimumTrackStyle={{
    backgroundColor: Platform.OS === 'ios' ? '#ebff64' : undefined,
  }}
/>

不过这个方法在部分组件版本上可能失效，还是方案一更稳妥。

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