React Native双滑块组件AnimatedTextInput实时更新问题求助

问题根源 #

你的代码存在两个关键错误，导致拖动滑块时文本无法实时更新：

1. AnimatedTextInput的animatedProps传递错误：第一个输入框的animatedProps={()=>{propLabel1}}写法有误，无需用箭头函数包裹，直接传入propLabel1即可。
2. TextInput属性名错误：第二个输入框的animatedProps返回了text属性，但控制TextInput显示内容的属性是value，而非text。

修正后的代码 #

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

export const SliderRange = ({min, max, onValueChange}) =>{

const knob1 = useSharedValue(0);
const knob1x = useSharedValue(0);
const scaleKnob1 = useSharedValue(1);

const knob2 = useSharedValue(MAXWIDTH);
const knob2x = useSharedValue(MAXWIDTH);
const scaleKnob2 = useSharedValue(1);

const styleLine = useAnimatedStyle(()=>{
    return{
        backgroundColor:'rgba(255,255,255,0.85)',
        height:6,
        marginTop:-5,
        borderRadius:10,
        width:knob2.value-knob1.value,
        transform:[{translateX:knob1.value}]
    }
});

const onDrag1 = Gesture.Pan()
.onBegin(() => {
    knob1x.value = knob1.value;
})
.onChange((event) => {
    scaleKnob1.value = 1.3
    knob1.value = event.translationX + knob1x.value < 0 ? 0 : event.translationX + knob1x.value >  knob2.value-20 ? knob2.value-20: event.translationX + knob1x.value;
    // 可选：实时通知父组件当前值
    runOnJS(onValueChange)({
        min:`${Math.round((min+((knob1.value/MAXWIDTH) * (max-min))))}`,
        max:`${Math.round((min+((knob2.value/MAXWIDTH) * (max-min))))}`
    })
})
.onEnd(()=>{
    scaleKnob1.value = 1;
    runOnJS(onValueChange)({
        min:`${Math.round((min+((knob1.value/MAXWIDTH) * (max-min))))}`,
        max:`${Math.round((min+((knob2.value/MAXWIDTH) * (max-min))))}`
    })
});

const onDrag2 = Gesture.Pan()
.onBegin(() => {
    knob2x.value = knob2.value;
})
.onChange((event) => {
    scaleKnob2.value = 1.3
    knob2.value = event.translationX + knob2x.value < knob1.value+20 ? knob1.value+20 : event.translationX + knob2x.value > MAXWIDTH ? MAXWIDTH: event.translationX + knob2x.value;
    // 可选：实时通知父组件当前值
    runOnJS(onValueChange)({
        min:`${Math.round((min+((knob1.value/MAXWIDTH) * (max-min))))}`,
        max:`${Math.round((min+((knob2.value/MAXWIDTH) * (max-min))))}`
    })
})
.onEnd(()=>{
    scaleKnob2.value = 1;
    runOnJS(onValueChange)({
        min:`${Math.round((min+((knob1.value/MAXWIDTH) * (max-min))))}`,
        max:`${Math.round((min+((knob2.value/MAXWIDTH) * (max-min))))}`
    })
});

const styleKnob1 = useAnimatedStyle(()=>{
    return{
        transform:[{translateX: knob1.value}, {scale:scaleKnob1.value}]
    }
});

const styleKnob2 = useAnimatedStyle(()=>{
    return{
        transform:[{translateX: knob2.value}, {scale:scaleKnob2.value}]
    }
});

const propLabel1 = useAnimatedProps(()=>{
    return{
        value: `${Math.round((min+((knob1.value/MAXWIDTH) * (max-min))))}`
    };
})
const propLabel2 = useAnimatedProps(()=>{
    // 修正：将text改为value
    return{
        value:`${Math.round((min+((knob2.value/MAXWIDTH) * (max-min))))}`,
    };
})

return(
    <View>
        <View style={styles.rangeContainer}>
            <View style={styles.labelContainer}>
                {/* 修正：去掉箭头函数，直接传propLabel1 */}
                <AnimatedTextInput defaultValue={`${min}`} editable={false} style={styles.label} animatedProps={propLabel1}/>
                <AnimatedTextInput defaultValue={`${max}`} editable={false} style={styles.label} animatedProps={propLabel2}/>
            </View>
        <View style={styles.track} />
            <Animated.View style={styleLine} />
            <GestureHandlerRootView>
                <GestureDetector gesture={onDrag1}>
                    <Animated.View style={[styles.knob, styleKnob1]}/>
                </GestureDetector>
                <GestureDetector gesture={onDrag2}>
                    <Animated.View style={[styles.knob, styleKnob2]}/>
                </GestureDetector>
            </GestureHandlerRootView>
        </View>
    </View>
)}

额外说明 #

• 若需要实时通知父组件更新值，可在onDrag1和onDrag2的onChange回调中调用runOnJS(onValueChange)，让父组件同步获取滑块实时值，而非仅在松开滑块时更新。
• useAnimatedProps会自动跟踪knob1、knob2等SharedValue的变化，只要这些值更新，AnimatedTextInput的内容就会实时刷新。

内容的提问来源于stack exchange，提问作者Brian Farias