Question

我的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>
        );

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

Answer 1

解决方案是在重新渲染后使用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 team保留状态。

React Native：重新渲染后panGestureHandler停止工作

1 个答案: