Cài Đặt
npm install --save react-native-easy-dnd
# or using yarn
yarn add react-native-easy-dnd
Sử Dụng
Trước hết, bạn cần nhập createDndContext
. Hàm này tạo ra ngữ cảnh để lưu trữ dữ liệu cho các thành phần con có khả năng kéo và thả.
import { createDndContext } from "react-native-easy-dnd";
const { Provider, Droppable, Draggable } = createDndContext();
Provider
Bọc phần của ứng dụng của bạn mà bạn muốn kích hoạt chức năng kéo và thả vào bên trong Provider
.
<Provider>
<View>
{/* */}
</View>
</Provider>
Draggable
Thêm một thành phần Draggable
với một hàm như một con. Phần tử mà bạn muốn làm có khả năng kéo và thả cần phải là Animated.View
mà các thuộc tính của nó phải mở rộng viewProps
được truyền vào bởi hàm render prop.
import {Animated} from 'react-native';
// ...
<Draggable
onDragStart={() => {
console.log('Started draggging');
}}
onDragEnd={() => {
console.log('Ended draggging');
}}
payload="my-draggable-item"
>
{({ viewProps }) => {
return (
<Animated.View
{...viewProps}
style={[viewProps.style, { width: 200, height: 200, backgroundColor: "red" }]}
>
<Text style={{ color: "#fff", fontWeight: "bold" }}>
Drag me
</Text>
</Animated.View>
);
}}
</Draggable>
Các Thuộc Tính
Thuộc Tính | Kiểu | Mô Tả |
---|---|---|
onDragStart |
Function |
Gọi lại khi người dùng bắt đầu kéo phần tử có khả năng kéo và thả |
onDragEnd |
Function |
Gọi lại khi người dùng kết thúc kéo phần tử có khả năng kéo và thả |
payload |
any |
Một giá trị tùy ý (thường là duy nhất) cho phần tử có khả năng kéo và thả này, có thể được sử dụng sau này để xác định phần tử có khả năng kéo và thả nào đã được thả vào phần tử có khả năng thả |
Droppable
Thêm một thành phần Droppable
với một hàm như một con. Tương tự, phần tử mà bạn muốn làm có khả năng thả cần phải là Animated.View
mà các thuộc tính của nó phải mở rộng viewProps
được truyền vào bởi hàm render prop.
import {Animated} from 'react-native';
// ...
<Droppable
onEnter={() => {
console.log('Draggable entered');
}}
onLeave={() => {
console.log('Draggable left');
}}
onDrop={({ payload }) => {
console.log('Draggable with the following payload was dropped', payload);
}}
>
{({ active, viewProps }) => {
return (
<Animated.View
{...viewProps}
style={[
{
width: 300,
height: 200,
backgroundColor: active
? "blue"
: "green"
},
viewProps.style,
]}
>
<Text style={{ fontWeight: "bold", color: "white" }}>Drop here</Text>
</Animated.View>
);
}}
</Droppable>
Các Thuộc Tính
Thuộc Tính | Kiểu | Mô Tả |
---|---|---|
onEnter |
Function |
Gọi lại khi một phần tử có khả năng kéo và thả nhập vào khu vực có khả năng thả |
onLeave |
Function |
Gọi lại khi một phần tử có khả năng kéo và thả rời khỏi khu vực có khả năng thả |
onDrop |
Function |
Gọi lại khi một phần tử có khả năng kéo và thả được thả vào khu vực có khả năng thả |
Sự Thú Vị!
Tôi đã viết hầu hết mã trong chuyến bay từ Toronto đến St. John’s vào tháng 3 năm 2019. ✈
Chi tiết Tải về:
Tác giả: mohebifar
Nguồn: https://github.com/mohebifar/react-native-easy-dnd
Giấy Phép: MIT license