React Native：在react-native-animated

问题描述

在我的RN 0.62.2应用程序中，将动画值声明更改为使用useRef后出现错误。没有错误的代码是：

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

const dragX = new Value(0);

由于它是功能组件，因此我遵循react-native-reanimated的{​​{3}}添加了useRef：

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

更改后，上面的行将引发错误：

尝试以下操作，问题是相同的：

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

尝试useValue，并且错误相同。除了上面链接的文档外，关于如何在useRef中使用react-native-reanimated的信息很少。

documentation

更新：

代码太长且混乱。方法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,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,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;
    };
    
};    

解决方法

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

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

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