react native 中切换线程的问题

问题描述

所以我有这个简单的动画，如果你拖动一个元素，它会在动画结束时返回到 (0,0)，

import React from "react"
import { SafeAreaView } from "react-native"
import { PanGestureHandler } from "react-native-gesture-handler"
import Animated,{
    Easing,runOnJS,useAnimatedGestureHandler,useAnimatedStyle,useSharedValue,withSpring,withTiming
} from "react-native-reanimated"

const Comp: React.FC = () => {
    const x = useSharedValue(0)
    const y = useSharedValue(0)

    const translateAnim = useAnimatedStyle(() => {
        return {
            transform: [{ translateX: x.value },{ translateY: y.value }]
        }
    })

    const drag = useAnimatedGestureHandler({
        onStart: (e,ctx: { startX: number; startY: number }) => {
            ctx.startX = x.value
            ctx.startY = y.value
        },onActive: (e,ctx) => {
            runOnJS(move)(
                ctx.startX,ctx.startY,e.translationX,e.translationY
            )
        },onEnd: (e,ctx) => {
            runOnJS(end)()
        }
    })

    function move(
        startX: number,startY: number,translateX: number,translateY: number
    ) {
        x.value = withTiming(startX + translateX,{
            duration: 0,easing: Easing.linear
        })
        y.value = withTiming(startY + translateY,easing: Easing.linear
        })
    }

    function end() {
        x.value = withSpring(0)
        y.value = withSpring(0)
    }

    return (
        <SafeAreaView>
            <PanGestureHandler onGestureEvent={drag}>
                <Animated.View
                    style={[
                        { backgroundColor: "red",height: 100,width: 100 },translateAnim
                    ]}></Animated.View>
            </PanGestureHandler>
        </SafeAreaView>
    )
}

export default Comp

如您所见，我使用 move 函数在 JS 线程中运行了 end 和 runOnJs()。

• 这是否意味着 withTiming 也将在 JS 线程上运行还是 withTiming 始终在 UI 线程上运行？
• 正如您所见x.value = withTiming(...)。我应该将它包装在 runOnUI() 函数中吗？或者更确切地说，当我们设置动画值时，它是否必须在 UI 线程上运行？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）