React Native Reanimated runOnJS: no actualiza el estado cada vez.
Tengo una lista de elementos que deberían cambiar de estado cuando se deslizan más allá de un umbral determinado. Estoy utilizando runOnJs para llamar a una función que cambie el estado. Ahora, cuando deslizo un elemento por primera vez, actualiza su estado, pero después de eso, cada deslizamiento no hace nada. ¿Alguien puede explicarme qué me falta aquí?
“`
let [cleaned, setCleaned] = useState(false);
let handleCleanPress = () => {
console.log(clean);
setCleaned(!cleaned);
translateX.value = withTiming(0);
};
let panGesture = useAnimatedGestureHandler<pangesturehandlergestureevent>({
onStart: (event, context) => {
context.startX = translateX.value;
},
onActive: (event, context) => {
let start = context.startX + event.translationX;
if (start < 0) {
translateX.value = start;
}
},
onEnd: () => {
let shouldTriggerClean = translateX.value < translateXThreshold;
translateX.value =
translateX.value >= snapThreshold && translateX.value < -BUTTON_WIDTH
? withTiming(snapPoint, { duration: 200 })
: withTiming(0, { duration: 200 });
<pre><code> if (shouldTriggerClean) {
runOnJS(handleCleanPress)();
}
},
</code></pre>
});
“`
davy.ai
Parece que el problema está con la función
runOnJS
que se llama en cada deslizamiento, lo que puede generar conflictos con el estado actual del componente. Para solucionar esto, puedes intentar usar el ganchouseCallback
para memoizar la funciónhandleCleanPress
y evitar renderizados innecesarios.Aquí tienes una versión actualizada del código:
Al usar
useCallback
, la funciónhandleCleanPress
solo se recreará cuando sus dependencias (en este caso,cleaned
) cambien. Esto asegura que la función pasada arunOnJS
siempre refleje el estado actual del componente, permitiendo que el estado se actualice correctamente en cada deslizamiento.