使用手势处理程序在我的反应本机代码中出现错误

Question

我正在 js 文件中使用 React Native Gesture Handler，当我运行代码时，我收到此错误

错误 [react-native-gesture-handler] 手势中的某些回调是工作集，有些不是。如果您希望在 UI 线程上运行回调，请确保所有回调都标记为“worklet”，或者在手势上显式使用“.runOnJS(true)”修饰符以在 JS 线程上运行所有回调。

代码：

` import * as React from 'react'; 从“react-native”导入{视图、文本、尺寸}； 从 '../styles/style_home' 导入样式 从 'react-native-animatable' 导入 * as Animatable 从 '@shopify/react-native-skia' 导入 {Canvas, Path, Skia}； 从'd3'导入{curveBasis，line，scaleLinear，scalePoint}； 从 '../../assets/csvjson.json' 导入 DataPalmas 从“./Gradient”导入渐变 从 './XAxisText' 导入 XAxisText； 从'react-native-reanimated'导入{clamp，runOnJS，useSharedValue，withDelay，withTiming}； 从 './Cursor' 导入光标 进口 { 手势， 手势检测器， PanGestureHandlerEventPayload， 来自 'react-native-gesture-handler'; 从 'react-native-redash' 导入 {getYForX, parse};

export default function () {
    const [showCursor, setShowCursor] = React.useState(false)
    const animationLine = useSharedValue(0)
    const animationGradient = useSharedValue({x: 0, y: 0})
    const cx = useSharedValue(0)
    const cy = useSharedValue(0)

    React.useEffect(() => {
        animationLine.value = withTiming(1, {duration:2000})
        animationGradient.value = withDelay(2000, withTiming({x: 0, y: chartHeight}, {duration: 1000}))
    }, [])

    const chartHeight = 150
    const chartWidth = Dimensions.get('window').width
    const chartMargin = 20
    const data = DataPalmas

    const xDomain = data.map((dataPoint) => dataPoint.Data)
    const xRange = [chartMargin, chartWidth - chartMargin]
    const x = scalePoint().domain(xDomain).range(xRange).padding(0)
    const stepX = x.step()
    const max = Math.max(...data.map(val => val.Precipitacao))
    const min = Math.min(...data.map(val => val.Precipitacao))

    const yDomain = [min, max]
    const yRange = [chartHeight, 0]
    const y = scaleLinear().domain(yDomain).range(yRange)

    const curvedLine = line()
    .x(d => x(d.Data))
    .y(d => y(d.Precipitacao))
    .curve(curveBasis)(data)

    const linePath = Skia.Path.MakeFromSVGString(curvedLine)
    const path = parse(linePath.toSVGString())

    function handleGestureEvent(e){
        const clampValue = clamp(
            Math.floor(e.absoluteX / stepX) * stepX + chartMargin,
            chartMargin,
            chartWidth - chartMargin,
        )
        cx.value = clampValue
        cy.value = getYForX(path, Math.floor(clampValue))
    }
    const pan = Gesture.Pan()
        .onTouchesDown(() => {
            setShowCursor(true)
        })
        .onTouchesUp(() => {
            setShowCursor(false)
        })
        .onBegin(handleGestureEvent)
        .onChange(handleGestureEvent)

    return (
    <Animatable.View style={styles.container__graphic} animation={"fadeInLeft"}>
        <GestureDetector gesture={pan}>
            <Canvas
            style={{
                width: chartWidth, 
                height: chartHeight+30,
            }}>
                <Path 
                path={linePath} 
                style={'stroke'} 
                strokeWidth={2} 
                color={'#0bb861'} 
                strokeCap={'round'}
                start={0}
                end={animationLine}/>
                <Gradient
                    chartHeight = {chartHeight}
                    chartMargin = {chartMargin}
                    chartWidth = {chartWidth}
                    curvedLine = {curvedLine}
                    animationGradient = {animationGradient}
                />
                {data.map((dataPoint, index) => (
                    <XAxisText
                        x={x(dataPoint.Data)}
                        y={chartHeight}
                        text={dataPoint.Data}
                        key={index}
                    />
                ))}
                {showCursor && 
                <Cursor 
                    cx = {cx}
                    cy = {cy}
                    chartHeight = {chartHeight}
                />}
                
            </Canvas>
        </GestureDetector>
    </Animatable.View>
    );
}`

当我在该函数中使用“worklet”时，单击时应用程序崩溃

function handleGestureEvent(e){
    **'worklet'**
    const clampValue = clamp(
        Math.floor(e.absoluteX / stepX) * stepX + chartMargin,
        chartMargin,
        chartWidth - chartMargin,
    )
    cx.value = clampValue
    cy.value = getYForX(path, Math.floor(clampValue))
}

Answer 1

您需要将

.runOnJS(true)

添加到您的

Gesture.Pan()

通话中，如下所示：

    const pan = Gesture.Pan()
        .runOnJS(true)
        .onTouchesDown(() => {
            setShowCursor(true)
        })
        .onTouchesUp(() => {
            setShowCursor(false)
        })
        .onBegin(handleGestureEvent)
        .onChange(handleGestureEvent)