Я хочу сделать элемент (синее поле) перетаскиваемым только внутри фиксированной области (между двумя полосами).
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.
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
Нужна помощь. Заранее спасибо.