如何在GestureHandler React-native中使用lottie动画

Question

今天我想在中的GestureHandler中使用lottie动画就像我上面说的。但是出了问题。当我调用lottie.current.play(0, 15);例如代码-

const gestureHandler = useAnimatedGestureHandler({
onStart: (_) => {
lottie.current.play(0, 15);    
},
onActive: () => {
},
onEnd: (_) => {
},
});

I got error

ERROR TypeError: null不是一个对象(求值)lottie.current.play)

我不明白为什么?

我已经引用了对象

const lottie = useRef();
.
.
.
<Lottie
source={require("./assets/cart.json")}
style={{ width: 100, height: 100, alignSelf: "center" }}
autoPlay={false}
loop={false}
ref={lottie}
resizeMode="contain"
/>

还发现我可以使用lottie.current.play(0, 15);的功能在React.useEffect但为什么我不能在这个事件中使用onStart, onActive, onEnd

Answer 1

基本上onStart, onActive和onEnd是成熟的工作件，即javascript函数将在UI线程上执行。因此，如果您的函数只能在Javascript线程和需要从一个worklet启动它必须总是用runOnJS指定。

所以我应该-

const playAnim = (num) => {
lottie.current.play(num);
}; 
runOnJS(playAnim)(15);