RN 手势处理程序：拖动 1 个图像但 2 个图像一起移动

Question

在我的 React Native 0.62.2 应用程序中，react-native-gesture-handler 1.6.1 和 react-native-animated 10.10.1 用于使图像网格可拖动。问题是所有上传的图像网格一起移动而不是单独拖动。这是可拖动图像网格的代码：

import { Col, Row, Grid } from 'react-native-easy-grid';
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated from "react-native-reanimated";
import FastImage from 'react-native-fast-image';

export default DisplayImages = ({pics, deleteImage}) => {  //<<==component to display images passed in from 'pics'

const translateX = new Animated.Value(0)  //<<==draggable related code
const translateY = new Animated.Value(0)
const handleGesture = Animated.event([{nativeEvent: {translationX: translateX,translationY:translateY}}], { useNativeDriver: true });

//VV== code below displays single image grid
const displayImg = (img_source, width, ht, index, modalWidth, modalHt) => {  
  let aniStyle = {
                transform:[
                    { translateY : translateY },
                    { translateX :   translateX }
                ]
            };
            return (
                <>
                    <PanGestureHandler onGestureEvent={handleGesture}>
                        <Animated.View style={aniStyle}>
                        <TouchableOpacity onPress={()=>{setModalDialog(index)}} >
                            <FastImage 
                                source={{uri:img_source}} 
                                resizeMode={FastImage.resizeMode.cover} 
                                key={index}
                                style={{
                                    width:width, 
                                    height:ht, 
                                    verticalAlign:0,
                                    paddingTop:0,
                                }}
                            />
                        </TouchableOpacity>
                        </Animated.View>
                    </PanGestureHandler>
                   )
}
//VV==code blow to display 2 images as an example

 return (                   
            <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>
                <Row style={styles.row}>   
                    {pics.map((item, index) => {
                        return (displayImg(item, screen_width*half, screen_width*half, index,  screen_width, item.height*(screen_width/item.width)))
                    })}                 
                </Row>
            </Grid>
        );
 }

这里是将 2 个图像网格一起向左拖动，但不只移动一个网格

1 个图像被拖动，但 2 个图像一起移动

Answer 1

需要为每个网格定义手势的属性。可以通过将属性的声明移动到方法 displayImg:

的定义中来完成

const displayImg = (img_source, width, ht, index, modalWidth, modalHt) => {  
  const translateX = new Animated.Value(0)  //<<==draggable related code
  const translateY = new Animated.Value(0)
  const handleGesture = Animated.event([{nativeEvent: {translationX:   translateX,translationY:translateY}}], { useNativeDriver: true });
  let aniStyle = {
                transform:[
                    { translateY : translateY },
                    { translateX :   translateX }
                ]
            };

     return (
                <>
                    <PanGestureHandler onGestureEvent={handleGesture}>
                        <Animated.View style={aniStyle}>
   ...

之后，每个格子都可以自己拖动了。

RN 手势处理程序：拖动 1 个图像但 2 个图像一起移动

RN gesture handler: 1 image is dragged but 2 images are moving together

react-native

react-native-reanimated

react-native-gesture-handler

panresponder