0

我的 0.62.2 应用程序中有一个简单的拖动动画。拖动是用react-native-gesture-handler 1.6.1和实现的react-native-reanimated 1.10.1。拖动的项目是方形网格中的图像。一行中有 2 个网格或 3 个网格来显示图像。这是在方法中渲染单个图像的代码displayImg：

      const displayImg = (img_source, width, ht, index, modalWidth, modalHt, dataLen, sortFn) => {
       ....
            const dragX = new Value(0);
            const dragY = new Value(0);
            const offsetX = new Value(0);
            const offsetY = new Value(0);
            const addX = add(offsetX, dragX);
            const addY = add(offsetY, dragY);
            const state = new Value(-1);
            const scale = new Value(1);
            const transX = cond(eq(state, State.ACTIVE), addX, set(offsetX, addX));
            const transY = cond(eq(state, State.ACTIVE), addY, [
                                    cond(eq(state, State.END), call([addX, addY, aniIndex, aniGridPR], onUp)),  //<<==onUp is method called after State.END, nothign but a console output for now.
                                    set(offsetY, addY),
                                    ]);
                                    
            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>

这是渲染图像数组的渲染代码：

          return (
            <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>
                {pics.map((item, index) => {  //<<==pics is an image array
                    if (index%2===0) {  
                        if (pics[index+1]) {
                            return (
                                <Row style={styles.row}>
                                    {displayImg(picPath(item), screen_width*half, screen_width*half, index,  screen_width, item.height*(screen_width/item.width), len, move)}
                                    {displayImg(picPath(pics[index+1]), screen_width*half, screen_width*half, index+1,  screen_width, pics[index+1].height*(screen_width/pics[index+1].width), len, move)}
                                </Row>    
                            )} else {
                            return (
                                <Row style={styles.row}>
                                    {displayImg(picPath(item), screen_width*half, screen_width*half, index,  screen_width, item.height*(screen_width/item.width), len, move)}
                                </Row>    
                            )};                                           
                    }
                })}                        
            </Grid>
        );

图像可以四处拖动。但是，在添加新图像并导致重新渲染后，之前加载的图像无法拖动并停止响应拖动。但是新添加的图像仍然可以拖动。我感觉问题可能与平移手势处理和动画的代码有关，但无法找出问题所在。有关于类似问题的帖子，但不完全相同。

4

1 回答 1

0

解决方案是使用useValue重新渲染后保留图像组件的状态。由于useValue是钩子，不能在条件下使用。方法displayImg被转换为组件DisplayImg，动画变量的声明被移动到组件的顶部DisplayImg。

  import Animated, {useValue} from "react-native-reanimated";
  function DisplayImg() {
    const aniIndex= new Value(index);
    const dragX = useValue(0);
    const dragY = useValue(0);
    const offsetX = new Value(0);
    const offsetY = new Value(0);
    var transX = useValue(0);
    var transY = useValue(0);
    const state = new Value(-1);
    const scale = new Value(1);

     ......
  }

根据经验，所有动画值都应useValue根据react-native-gesture-handler 团队保留状态。

于 2020-08-18T19:40:49.963 回答