react-native(리액트 네이티브) API - PanResponder

react-native(리액트 네이티브) API - PanResponder

const React = require('react')

const createReactClass = require('create-react-class')

const ReactNative = require('react-native')

const { PanResponder, StyleSheet, View, Text } = ReactNative

const CIRCLE_SIZE = 80

const PanResponderExample = createReactClass({

_panResponder: {},

_previousLeft: 0,

_previousTop: 0,

_circleStyles: {},

circle: null,

UNSAFE_componentWillMount() {

this._panResponder = PanResponder.create({

onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,

onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,

onPanResponderGrant:this._handlePanResponderGrant,

onPanResponderMove:this._handlePanResponderMove,

onPanResponderRelease:this._handlePanResponderEnd,

onPanResponderTerminate:this._handlePanResponderEnd,

})

this._previousLeft = 20

this._previousTop = 84

this._circleStyles = {

style: {

left: this._previousLeft,

top: this._previousTop,

backgroundColor: 'red',

},

}

},

componentDidMount() {

this._updateNativeStyles()

},

render() {

return(

<View style={styles.container}>

<View

ref={circle => {

this.circle = circle

}}

style={styles.circle}

{...this._panResponder.panHandlers}

/>

</View>

)

},

_highlight() {

this._circleStyles.style.backgroundColor = 'blue'

this._updateNativeStyles()

},

_unHighlight() {

this._circleStyles.style.backgroundColor = 'green'

this._updateNativeStyles()

},

_updateNativeStyles() {

this.circle && this.circle.setNativeProps(this._circleStyles)

},

_handleStartShouldSetPanResponder(e, gestureState) {

return true

},

_handleMoveShouldSetPanResponder(e, gestureState) {

return true

},

_handlePanResponderGrant(e, gestureState) {

this._highlight()

},

_handlePanResponderMove(e, gestureState) {

this._circleStyles.style.left = this._previousLeft + gestureState.dx

this._circleStyles.style.top = this._previousTop + gestureState.dy

this._updateNativeStyles()

},

_handlePanResponderEnd(e, gestureState) {

this._unHighlight()

this._previousLeft += gestureState.dx

this._previousTop += gestureState.dy

},

})

export default class App extends React.Component {

render() {

return(

<View style={styles.container}>

<PanResponderExample />

</View>

)

}

}

var styles = StyleSheet.create({

circle: {

width: CIRCLE_SIZE,

height: CIRCLE_SIZE,

borderRadius: CIRCLE_SIZE / 2,

position: 'absolute',

left: 0,

top: 0,

},

container: {

flex: 1,

paddingTop: 64,

},

})