react-native-draggable-grid

中文文档

Demo

Getting Started

Installation

npm install react-native-draggable-grid --save

Usage

import React from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';
import { DraggableGrid } from 'react-native-draggable-grid';

interface MyTestProps {

}

interface MyTestState {
  data:{key:string, name:string}[];
}

export class MyTest extends React.Component<MyTestProps, MyTestState>{

  constructor(props:MyTestProps) {
    super(props);
    this.state = {
      data:[
        {name:'1',key:'one'},
        {name:'2',key:'two'},
        {name:'3',key:'three'},
        {name:'4',key:'four'},
        {name:'5',key:'five'},
        {name:'6',key:'six'},
        {name:'7',key:'seven'},
        {name:'8',key:'eight'},
        {name:'9',key:'night'},
        {name:'0',key:'zero'},
      ],
    };
  }

  public render_item(item:{name:string, key:string}) {
    return (
      <View
        style={styles.item}
        key={item.key}
      >
        <Text style={styles.item_text}>{item.name}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.wrapper}>
        <DraggableGrid
          numColumns={4}
          renderItem={this.render_item}
          data={this.state.data}
          onDragRelease={(data) => {
            this.setState({data});// need reset the props data sort after drag release
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button:{
    width:150,
    height:100,
    backgroundColor:'blue',
  },
  wrapper:{
    paddingTop:100,
    width:'100%',
    height:'100%',
    justifyContent:'center',
  },
  item:{
    width:100,
    height:100,
    borderRadius:8,
    backgroundColor:'red',
    justifyContent:'center',
    alignItems:'center',
  },
  item_text:{
    fontSize:40,
    color:'#FFFFFF',
  },
});

Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | numColumns | number | yes | how many items should be render on one row| | data | array | yes | data's item must have unique key，item's render will depend on the key| | renderItem |(item, order:number) => ReactElement| yes | Takes an item from data and renders it into the list | | itemHeight | number | no | if not set this, it will the same as itemWidth | | dragStartAnimation | object | no | custom drag start animation | | style | object | no | grid styles |

Event Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | onItemPress | (item) => void | no | Function will execute when item on press | | onDragStart | (startDragItem) => void | no | Function will execute when item start drag | | onDragRelease | (data) => void | no | Function will execute when item release, and will return the new ordered data | | onResetSort | (data) => void | no | Function will execute when dragged item change sort | | onDragging | (gestureState: PanResponderGestureState) => void| no | Function will execute when dragging item |

Item Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | disabledDrag | boolean | no | It will disable drag for the item | | disabledReSorted | boolean | no | It will disable resort the item |

if you set disabledResorted be true, it will look like that

Custom Drag Start Animation

If you want to use your custom animation, you can do like this

 render() {
    return (
      <View style={styles.wrapper}>
        <DraggableGrid
          numColumns={4}
          renderItem={this.render_item}
          data={this.state.data}
          onDragStart={this.onDragStart}
          dragStartAnimation={{
            transform:[
              {scale:this.state.animatedValue}
            ],
          }}
        />
      </View>
    );
  }

  private onDragStart = () => {
    this.state.animatedValue.setValue(1);
    Animated.timing(this.state.animatedValue, {
      toValue:3,
      duration:400,
    }).start();
  }

Resort item

if you want resort item yourself,you only need change the data's sort, and the draggable-grid will auto resort by your data.

the data's key must unique