A solution to the touch gesture. Reference to the React Native PanResponder
Install
$ npm install universal-panresponder --save
Usage
import createElement Component render findDOMNode from 'rax';import View from 'rax-components';import PanResponder from 'universal-panresponder'; const CIRCLE_SIZE = 80;const CIRCLE_COLOR = 'blue';const CIRCLE_HIGHLIGHT_COLOR = 'green'; { this_panResponder = PanResponder; this_previousLeft = 20; this_previousTop = 84; this_circleStyles = style: left: this_previousLeft top: this_previousTop ; } { this; } { return <View => <View = = /> </View> ; } { if thiscircle && thiscirclesetNativeProps thiscircle; } { if thiscircle && thiscirclesetNativeProps thiscircle; } { if thiscircle && thiscirclesetNativeProps thiscircle; } { // Should we become active when the user presses down on the circle? return true; } { // Should we become active when the user moves a touch over the circle? return true; } this; { this_circleStylesstyleleft = this_previousLeft + gestureStatedx; this_circleStylesstyletop = this_previousTop + gestureStatedy; this; }; { this; this_previousLeft += gestureStatedx; this_previousTop += gestureStatedy; }; const styles = circle: width: CIRCLE_SIZE height: CIRCLE_SIZE borderRadius: CIRCLE_SIZE / 2 backgroundColor: CIRCLE_COLOR position: 'absolute' left: 0 top: 0 container: flex: 1 paddingTop: 64 ; ;
For more complete documentation, please refer to React Native PanResponder.