react-native - 复活错误 "tried to synchronously call function res from a different thread "

Question

有一些在浏览器中工作正常的手势处理程序，但我在 iOS 上的 useAnimatedGestureHandler Hook 的 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 运行时我仍然会遇到错误。

Answer 1

很抱歉回复晚了。我认为，正如您已经提到的，问题在于没有使用 runOnJS。基本上，onStart、onActive 和 onEnd 是成熟的 worklet，即将在 UI 线程上执行的 javascript 函数。因此，如果您有只能在 javascript 线程上执行并且需要从 worklet 启动的函数，则必须始终使用 runOnJS 指定它。

更具体地说，在 onEnd 函数中，您应该像这样包装 setHeaderExpanded 函数:runOnJS(setHeaderExpanded)(true)//您要使用的 bool 值。