Reanimated 中的错误“试图从不同的线程同步调用函数 res”

Posted 2023-02-19

【中文标题】Reanimated 中的错误“试图从不同的线程同步调用函数 res”

【英文标题】：Error in Reanimated "tried to synchronously call function res from a different thread "

【发布时间】：2021-11-07 04:07:39

【问题描述】：

有一些手势处理程序可以在浏览器中正常工作，但我在 ios 上的 useAnimatedGestureHandler 挂钩的 onEnd 回调中收到此错误。

这是与我尝试添加的手势相关的所有代码

    const headerHeight = useSharedValue(176)

    const outerStyle = useAnimatedStyle(() => (
        minHeight: 176,
        maxHeight: 416,
        height: headerHeight.value,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        position: 'relative',
        overflow: 'visible',
        zIndex: 502,
    ))

    const innerStyle = useAnimatedStyle(() => (
        overflow: 'hidden',
        height: headerHeight.value,
        minHeight: 176,
        maxHeight: 416,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
    ))

    
    const resizeHeaderHeight = useAnimatedGestureHandler(
        onStart: () => ,
        onActive: (event) => 
            headerHeight.value = event.absoluteY
        ,
        onEnd: () => 
            if(headerHeight.value < 305) 
                headerHeight.value  = withTiming(176, 
                    duration: 500,
                )
                setHeaderExpanded(false)
             else 
                headerHeight.value  = withTiming(416, 
                    duration: 500,
                )
                setHeaderExpanded(true)
               
        ,
    )

    return <>
    <PanGestureHandler onGestureEvent=resizeHeaderHeight>
        <Animated.View style=outerStyle>
            <Animated.View style=innerStyle>
                <HeaderComponent
                    expandable=true
                    hideContentCollapsed=false
                    onClickExpand=() => 
                        // setHeaderExpanded(!headerExpanded)
                    
                    onClickTitle=openMonthPicker
                >
                    title: <Title />,
                    content: <HeaderCalendar />,
                    buttons: [
                        <RefreshButton key='refresh' />,
                        <AssignmentOffersButton key='assignment-offers' navigation=navigation />,
                        <FiltersButton key='filters' navigation=navigation />,
                    ],
                </HeaderComponent>
                </Animated.View>
            <ExpandButton isExpanded=headerExpanded onClick=()=>  />
            </Animated.View>
        </PanGestureHandler>

        headerExpanded && <Overlay onClick=() => 
            setHeaderExpanded(!headerExpanded)
         /> 
    </>


export default observer(Header)

已尝试将 onEnd 定义为“worklet”并使用建议的 runOnJs 函数来解决此问题，但我不确定我是否正确执行此操作，因为每次 onEnd 运行时我仍然有错误。

【参考方案1】：

对于迟到的回复，我深表歉意。 我认为，正如您已经提到的，问题在于不使用 runOnJS。 基本上 onStart、onActive 和 onEnd 是成熟的工作集，即将在 UI 线程上执行的 javascript 函数。 因此，如果您的函数只能在 javascript 线程上执行并且需要从工作集启动，则必须始终使用 runOnJS 指定。

更具体地说，在 onEnd 函数中，您应该像这样包装 setHeaderExpanded 函数： runOnJS(setHeaderExpanded)(true) // the boolean value you want to use.