SHARE
TWEET

Untitled

a guest Oct 23rd, 2017 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { StyleSheet, View, Animated, PanResponder } from 'react-native';
  3.  
  4. export default class TestComponent extends Component {
  5.  
  6.     constructor(props) {
  7.         super(props);
  8.         this.position = new Animated.ValueXY();
  9.         const panResponder = PanResponder.create({
  10.             onStartShouldSetPanResponder: () => true,
  11.             onPanResponderMove: (event, gesture) => {
  12.                 this.position.setValue({
  13.                     x: gesture.dx,
  14.                     y: gesture.dy,
  15.                 })
  16.             },
  17.             onPanResponderRelease: (event, gesture) => {
  18.                 this.position.setValue({
  19.                     x: gesture.dx,
  20.                     y: gesture.dy,
  21.                 })
  22.             }
  23.         });
  24.  
  25.         this.state = {
  26.             panResponder
  27.         }
  28.     }
  29.  
  30.     render() {
  31.         return (
  32.             <View style={styles.topLevel}>
  33.                 <Animated.View style={StyleSheet.flatten([styles.board,
  34.                 this.position.getLayout()])}
  35.                     {...this.state.panResponder.panHandlers}>
  36.                     <View style={StyleSheet.flatten([styles.whiteCell, {
  37.                         left: 50,
  38.                         top: 50,
  39.                     }])} />
  40.                     <View style={StyleSheet.flatten([styles.blackCell, {
  41.                         left: 150,
  42.                         top: 50,
  43.                     }])} />
  44.                     <View style={StyleSheet.flatten([styles.blackCell, {
  45.                         left: 50,
  46.                         top: 150,
  47.                     }])} />
  48.                     <View style={StyleSheet.flatten([styles.whiteCell, {
  49.                         left: 150,
  50.                         top: 150,
  51.                     }])} />
  52.  
  53.                     <View style={StyleSheet.flatten([styles.greenCoin, {
  54.                         top: 150,
  55.                         left: 150
  56.                     }])} />
  57.  
  58.                     <View style={StyleSheet.flatten([styles.redCoin, {
  59.                         top: 50,
  60.                         left: 150
  61.                     }])} />
  62.                 </Animated.View>
  63.             </View>
  64.         );
  65.     }
  66. }
  67.  
  68. const styles = StyleSheet.create({
  69.     topLevel: {
  70.         backgroundColor: "#CCFFCC",
  71.         flex: 1,
  72.         justifyContent: 'center',
  73.         alignItems: 'center',
  74.         flexDirection: 'row',
  75.     },
  76.     board: {
  77.         width: 300,
  78.         height: 300,
  79.         backgroundColor: "#FFCCFF",
  80.     },
  81.     whiteCell: {
  82.         width: 100,
  83.         height: 100,
  84.         backgroundColor: '#FFAA22',
  85.         position: 'absolute',
  86.     },
  87.     blackCell: {
  88.         width: 100,
  89.         height: 100,
  90.         backgroundColor: '#221122',
  91.         position: 'absolute',
  92.     },
  93.     greenCoin: {
  94.         width: 100,
  95.         height: 100,
  96.         position: 'absolute',
  97.         backgroundColor: '#23CC12',
  98.         borderRadius: 50,
  99.     },
  100.     redCoin: {
  101.         width: 100,
  102.         height: 100,
  103.         position: 'absolute',
  104.         backgroundColor: '#FF0000',
  105.         borderRadius: 50,
  106.     },
  107. });
RAW Paste Data
Top