react-native-draggable-grid
Demo
Bắt Đầu
Cài Đặt
npm install react-native-draggable-grid --save
Sử Dụng
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
| Tham số | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
| numColumns | number | có | số lượng mục sẽ được hiển thị trên một hàng |
| data | array | có | mục dữ liệu phải có khóa duy nhất, việc hiển thị của mục sẽ phụ thuộc vào khóa |
| renderItem | (item, order:number) => ReactElement | có | Lấy một mục từ dữ liệu và hiển thị nó trong danh sách |
| itemHeight | number | không | nếu không được thiết lập, nó sẽ giống như itemWidth |
| dragStartAnimation | object | không | tùy chỉnh hoạt ảnh khi bắt đầu kéo |
| style | object | không | kiểu lưới |
Sự Kiện Props
| Tham số | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
| onItemPress | (item) => void | không | Hàm sẽ thực thi khi mục được nhấn |
| onDragStart | (startDragItem) => void | không | Hàm sẽ thực thi khi bắt đầu kéo mục |
| onDragRelease | (data) => void | không | Hàm sẽ thực thi khi thả mục, và sẽ trả về dữ liệu mới được sắp xếp |
| onResetSort | (data) => void | không | Hàm sẽ thực thi khi mục kéo thay đổi sắp xếp |
| onDragging | (gestureState: PanResponderGestureState) => void | không | Hàm sẽ thực thi khi kéo mục |
Mục Props
| Tham số | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
| disabledDrag | boolean | không | Nó sẽ vô hiệu hóa kéo cho mục |
| disabledReSorted | boolean | không | Nó sẽ vô hiệu hóa việc sắp xếp lại mục |
nếu bạn đặt disabledReSorted là true, nó sẽ trông như sau
Tùy Chỉnh Hoạt Ảnh Kéo Bắt Đầu
Nếu bạn muốn sử dụng hoạt ảnh tùy chỉnh của bạn, bạn có thể làm như sau
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();
}
Sắp Xếp Lại Mục
nếu bạn muốn sắp xếp lại mục hàng bằng chính mình, bạn chỉ cần thay đổi thứ tự của dữ liệu, và lưới có thể kéo sẽ tự động sắp xếp lại theo dữ liệu của bạn.
khóa dữ liệu phải là duy nhất
Chi tiết tải xuống:
Tác giả: SHISME
Nguồn: https://github.com/SHISME/react-native-draggable-grid
