React-Native：使用 diffClamp 和多个滑块时，滑块旋钮跳转到随机位置

Question

在 react-native 中开发自定义滑块组件时，我遇到了一个非常烦人的问题。在我的应用程序中只使用一个滑块时，一切都很好。但是，如果我添加多个滑块，问题就开始了：如果是先使用一个滑块，然后在完成动画后，我再次使用同一个滑块，一切都很好。但是，如果我在第一个滑块之后使用另一个滑块，然后再次使用第一个滑块，则滑块旋钮会跳到一个随机位置。如果我不使用 react-native-reanimated 中的 "diffClamp" 函数，那么问题就不会发生，即使有多个滑块也是如此。但我需要 diffClamp 来限制滑块旋钮的 space。我无法弄清楚为什么组件会这样。我使用 react-native-reanimated 库以及 react-native-linear-gradient 库作为滑块的背景。

我在下面提供了一个最小的工作示例：

CustomSlider.js:


    export default class CustomSlider extends Component {

    constructor(){
        super();

        this.dragX = new Value(0);

        this.offsetX = new Value(0);
        this.gestureState = new Value(State.UNDETERMINED);


        this.transX = diffClamp(cond(
            eq(this.gestureState, State.ACTIVE),
            add(this.offsetX, this.dragX), 
            set(this.offsetX, add(this.offsetX, this.dragX))
        ), 0, SliderStyleSheet.linearGradient.width-30);

        this.gestureHandler = event([
            {
                nativeEvent: {
                    translationX: this.dragX,
                    state: this.gestureState
                }
            }
        ]) 

    }
    logValue(){
        console.log(this.gestureHandler.x)
    }
    render(){
        return(
            <View style={{marginTop: 15}}>
                <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                    <Image source={require('../images/CompSigSmile5.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile4.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile3.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile2.png')} style={this.props.imageStyle}/>  
                    <Image source={require('../images/CompSigSmile1.png')} style={this.props.imageStyle}/>
                </View>
                <View>
                    <LinearGradient start={{x:0, y:0}} end={{x:3.5, y:0}} colors={this.props.colors} style={SliderStyleSheet.linearGradient}>
                        <PanGestureHandler style={[{height: SliderStyleSheet.linearGradient.height}]} onGestureEvent={this.gestureHandler} onHandlerStateChange={this.gestureHandler} maxPointers={1}>
                            <Animated.View style={[{...StyleSheet.absoluteFillObject, width: SliderStyleSheet.linearGradient.height, height: SliderStyleSheet.linearGradient.height}, {transform: [{translateX: this.transX}]}]} >
                                <CustomSliderButton buttonColor={this.props.buttonColor}></CustomSliderButton>
                            </Animated.View>
                        </PanGestureHandler>
                    </LinearGradient>  
                </View>  
            </View>
        );
    }
}

App.js:

export default class SliderTestApp extends Component {
  constructor(){
    super();
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
      </View>
    );
  }
}

SliderStyleSheet.js:

export default StyleSheet.create({
    linearGradient: {
        height: 30,
        width: 150,
        borderRadius: 5,
        marginTop: 10
    }, 
    sliderButtonStyle: {
        borderRadius: 8,
        borderColor: "white",
        borderWidth: 2,
    },
    imageStyle: {
        height: 15,
        width: 15,
    },
    red: {
        color: 'rgba(200,59,62, 0.5)'
    },
    green: {
        color: 'rgba(40,148,72, 2.0)'
    },
    blue: {
        color: 'rgba(62,108,177, 0.5)'
    },
    yellow: {
        color: 'rgba(242,205,55, 0.5)'
    },
    orange: {
        color: 'rgba(208,102,28, 0.5)'
    },
    grey: {
        color: 'rgba(134,134,134, 0.5)'
    },
    white: {
        color: 'rgba(255,255,255, 0.5)'
    },
})

可能有人遇到过同样的问题。如果有人能回答，我将不胜感激。

谢谢和问候！

Answer 1

我修改了 CustomSlider.js class 的构造函数如下：

constructor(){
    super();

    this.dragX = new Value(0);

    this.offsetX = new Value(0);
    this.gestureState = new Value(State.UNDETERMINED);

    this.testlog = this.testlog.bind(this)

    this.gestureHandler = event([
        {
            nativeEvent: {
                translationX: this.dragX,
                state: this.gestureState
            }
        }
    ])
    this.transX = interpolate(cond(
        eq(this.gestureState, State.ACTIVE),
        add(this.offsetX, this.dragX), 
        set(this.offsetX, interpolate(add(this.offsetX, this.dragX), {
            inputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height],
            outputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            extrapolateRight: 'clamp', 
            extrapolateLeft: 'clamp'
        }))), {
            inputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            outputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            extrapolateRight: 'clamp',
            extrapolateLeft: 'clamp'
    })


}

我使用了 interpoalte() 函数而不是 diffClamp() ，这为我完成了工作。

React-Native：使用 diffClamp 和多个滑块时，滑块旋钮跳转到随机位置

React-Native: Slider knob jumps to random position when using diffClamp and multiple sliders

animation

slider

react-native

react-native-reanimated