React Native: сделайте элемент перетаскиваемым внутри фиксированной области - PullRequest
0 голосов
/ 09 июля 2020

Я хочу сделать элемент (синее поле) перетаскиваемым только внутри фиксированной области (между двумя полосами).

enter image description here

My code example:

import React, {Component} from 'react';
import {
  Animated,
  View,
  StyleSheet,
  PanResponder,
  Text,
  Dimensions,
} from 'react-native';

//get full screen width
var width = Dimensions.get('window').width;

export default class App extends Component {
  //animated events
  pan = new Animated.ValueXY();
  mover = Animated.event([
    null,
    {
      dx: this.pan.x,
      dy: this.pan.y,
    },
  ]);

  //event for gestures
  panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,

    onPanResponderGrant: () => {
      this.pan.setOffset({
        x: this.pan.x._value,
        y: this.pan.y._value,
      });
    },

    onPanResponderMove: (e, gestureState) => {
        return this.mover(e, gestureState);
    },

    onPanResponderRelease: () => {
      this.pan.flattenOffset();
    },
  });

  draggable() {
    return (
      
        
          
            
          
        
      
    );
  }

  render() {
    return this.draggable();
  }
}

const styles = StyleSheet.create({
  topic: {
    marginTop: 10,
    marginBottom: 10,
    fontSize: 13,
  },
  container: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'center',
  },
  titleText: {
    fontSize: 14,
    lineHeight: 24,
    fontWeight: 'bold',
  },
  box: {
    height: 60,
    width: 100,
    backgroundColor: 'blue',
    borderRadius: 5,
    alignSelf: 'center',
  },
  viewBox: {
    height: 200,
    width: width,
    borderColor: '#000',
    borderWidth: 2,
    borderRightWidth: 0,
    borderLeftWidth: 0,
    justifyContent: 'center',
    marginTop: 30
  },
});

But with my code, it's draggable on all space as this image.

enter image description here

I'm using React Native version 0.62.2

Reference of what I'm using,

https://reactnative.dev/docs/panresponder

https://reactnative.dev/docs/animated

Нужна помощь. Заранее спасибо.

...