react-native - React Native: react-native-reanimated の useRef による以前のレンダリング時よりも多くのフックをレンダリングしました

Question

私の RN 0.62.2 アプリでは、アニメーション値の宣言が use に変更された後にエラーが発生しますuseRef。エラーのないコードは次のとおりです。

import Animated from 'react-native-reanimated';
import {Value} from Animated;

const dragX = new Value(0);

それは機能的なコンポーネントであり、私は追加されたのドキュメントに従っています:react-native-reanimateduseRef

const dragX = useRef(() => new Value(0)).current;

変更後、上記の行でエラーがスローされます。

以下を試してみましたが、問題は同じです：

const dragX = useRef(new Value(0));

試しuseValueてみましたが、エラーは同じです。上記のリンクのドキュメント以外でのuseRef使用方法に関する情報はあまりありません。react-native-reanimated

アップデート：

コードが長すぎて面倒です。メソッドdisplayImgは、親コンポーネントによって定義された領域に単一の画像を表示することです。親コンポーネントに複数の画像 (dateLen > 1) がある場合、表示されるすべての画像displayImgをドラッグでき、アニメーションが必要になります。useRef各再レンダリング後にステータスを維持するために使用されています。

function displayImg (img_source, width, ht, index, modalWidth, modalHt, dataLen, sortFn) {
        const aniIndex= new Value(index);
        const aniGridPR = new Value(gridPerRow);
        const dragX = useRef(new Value(0)).current;  //<<==this line causes error
        const dragY = new Value(0);
        const offsetX = new Value(0);
        const offsetY = new Value(0);
        const state = new Value(-1);
        const scale = new Value(1);
    var gridPerRow;
    console.log("image width : ", width);
    console.log("image ht : ", ht);
    if (dataLen <= 4 && dataLen > 1) {
        gridPerRow = 2;
    } else if (dataLen > 4) {
        gridPerRow = 3;
    } else {
        gridPerRow = 1;
    };
    
            
    function onUp ([x, y, indx, gridPR]) {
        console.log("In on Up");
    };
            
    
    if (img_source && img_source!==[] && img_source!=={}) {
        if (dataLen == 1) {
            const scale = new Value(1);
            function onGestureStateChange() {

            };
            /* const onGestureStateChange = event([
                //{nativeEvent:set(nativeEvent.scale, scale)},
            ]); */
            let scaleStyle = {
                transform:[
                    { perspective: 500 },
                    {
                        scale :  scale
                    }
                ]
            };
            return (
                <><PinchGestureHandler onHandlerStateChange={onGestureStateChange}>
                    <Animated.View style={scaleStyle}>
                    <GridImage
                        img_source={img_source}
                        width={width}
                        ht={ht}
                        index={index}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                    />
                    
                    {/* <DeleteButton index={index} /> */}
                    <ModalImage
                        img_source={img_source}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                        index={index}
                    />
                    </Animated.View>
                    </PinchGestureHandler>
                </>
                );
        } else {
            console.log("ani code");
            
            const addX = add(offsetX, dragX);
            const addY = add(offsetY, dragY);
            const transX = cond(eq(state, State.ACTIVE), addX);  //set(offsetX, addX)
            const transY = cond(eq(state, State.ACTIVE), addY, 
                                    cond(eq(state, State.END), 
                                        cond(or(greaterOrEq(abs(divide(dragX,new Value(width))), new Value(0.3)), greaterOrEq(abs(divide(dragY,new Value(ht))), new Value(0.3))), 
                                            call([addX, addY, aniIndex, aniGridPR], onUp))
                                        )
                                    );
                                    //, [ set(dragY, new Value(0)), set(dragX, new Value(0))]
            const handleGesture = event([
                {
                  nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    state,
                  },
                }, 
              ]);
            
            let aniStyle = {
                transform:[
                    { translateX : transX },
                    { translateY : transY },
                    
                ]
            };
            
            return (
                <>
                  
                    <PanGestureHandler 
                        onGestureEvent={handleGesture} 
                        onHandlerStateChange={handleGesture}
                        minPointers={1}
                        maxPointers={1}>
                        <Animated.View style={[aniStyle ]}>
                        <GridImage
                            img_source={img_source}
                            width={width}
                            ht={ht}
                            index={index}
                        />
                        </Animated.View>
                    </PanGestureHandler>
            
                {/* <DeleteButton index={index} /> */}
                <ModalImage
                    img_source={img_source}
                    modalWidth={modalWidth}
                    modalHt={modalHt}
                    index={index}
            />
                
                </>
                );
        };
        
    } else {
        return null;
    };
    
};