OK，我们先看下效果图

注意使用到了两个库

1.react-native-linear-gradient

2.react-native-gesture-handler

ok，我们看下面的代码

import {Image, TouchableWithoutFeedback, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import React from 'react';
import {Gesture,GestureDetector,GestureHandlerRootView,
} from 'react-native-gesture-handler';
export class HorizntalSlider extends React.Component {shouldComponentUpdate(nextProps: Readonly<P>,nextState: Readonly<S>,nextContext: any,): boolean {return false;}constructor(props) {super(props);this.progress = props.initValue;this.step = props.step;this.range = props.max - props.min;this.currentX = 0;this.enable = true;}_setValueChange(value) {this.currentX = value;this.selectedTrack.setNativeProps({style: {width: value},});let indicatorValue = value - 5 > 0 ? value - 5 : 0;this.indicator.setNativeProps({style: {left: indicatorValue - 1},});}componentDidMount(): void {if (this.props) {this.setPowerState(this.props.openState);}}_add() {if (!this.enable) {