Обработчик жестов RN: 1 изображение перетаскивается, но 2 изображения перемещаются вместе - PullRequest
Новая
       116

Обработчик жестов RN: 1 изображение перетаскивается, но 2 изображения перемещаются вместе

0 голосов
/ 06 августа 2020

В моем приложении 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 изображения перемещались вместе

1 Ответ

0 голосов
/ 06 августа 2020

Свойство жеста необходимо определить для каждой сетки. Это можно сделать, переместив объявление свойства в определение метода 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}>
   ...

После этого каждую сетку можно перетаскивать отдельно.

...