【ReactNative】react-native-draggable-flatlistを使ってドラッグ&ドロップ可能なリストを実装してみた

本記事の内容

• ドラッグ&ドロップ可能なリストを実装したい人

と言う方向けの記事になっています。
記事を読むことで下の動画のようなに実装することができます。

1. 概要

今回は、react-native-draggable-flatlistライブラリについて紹介していきます。

react-native-draggable-flatlistライブラリ

react-native-draggable-flatlistライブラリは、FlatListコンポーネントのようにリスト表示でき、さらにドラッグ&ドロップすることができるリスト表示型のドラッグ&ドロップライブラリです。

下記にgithubのリンクを貼っておきます。
react-native-draggable-flatlist

2. インストール方法

react-native-draggable-flatlistライブラリを使う為に、以下のコマンドを実行しインストールします。

さらに、追加で以下もインストールします。(ドラッグ&ドロップを実装する為に必要)

3. 使い方

3.1 import

‘react-native-draggable-flatlist’ライブラリから「DraggableFlatList」コンポーネントをインポートします。

4. 実装

サンプルコード

import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; import DraggableFlatList from "react-native-draggable-flatlist"; const exampleData = [...Array(20)].map((d, index) => ({ key: index+1, label: index, backgroundColor: "hsl(210, 0%, 20%)" })); export default class App extends React.Component { constructor(props) { super(props); this.state = { data: exampleData }; } render() { const renderItem = ({ item, index, drag, isActive }) => { return ( <TouchableOpacity style={{ height: 100, backgroundColor: isActive ? "hsl(210, 90%, 50%)" : item.backgroundColor, alignItems: "center", justifyContent: "center", borderBottomColor: "white", borderBottomWidth: 1, }} onLongPress={drag} > <Text style={{ fontWeight: "bold", color: "white", fontSize: 32 }} > {item.label} </Text> </TouchableOpacity> ); }; return ( 　<View style={{ flex: 1}}> <DraggableFlatList data={this.state.data} renderItem={renderItem} keyExtractor={(item, index) => item.key} onDragEnd={({ data }) => this.setState({ data })} /> </View> ); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; import DraggableFlatList from "react-native-draggable-flatlist";   const exampleData = [...Array(20)].map((d, index) => ({   key: index+1,   label: index,   backgroundColor: "hsl(210, 0%, 20%)" }));   export default class App extends React.Component {      constructor(props) {     super(props);     this.state = {       data: exampleData     };   }     render() {          const renderItem = ({ item, index, drag, isActive }) => {       return (         <TouchableOpacity           style={{             height: 100,             backgroundColor: isActive ? "hsl(210, 90%, 50%)" : item.backgroundColor,             alignItems: "center",             justifyContent: "center",             borderBottomColor: "white",             borderBottomWidth: 1,           }}           onLongPress={drag}         >           <Text             style={{               fontWeight: "bold",               color: "white",               fontSize: 32             }}           >             {item.label}           </Text>         </TouchableOpacity>       );     };       return (      　<View style={{ flex: 1}}>         <DraggableFlatList           data={this.state.data}           renderItem={renderItem}           keyExtractor={(item, index) => item.key}           onDragEnd={({ data }) => this.setState({ data })}         />       </View>     );   } }

4.1 プロパティ

本ライブラリを使う時に設定するプロパティを一部紹介します。

＜DraggableFlatList＞のプロパティ

data	レンダリング(リスト表示)されるアイテムを設定
horizontal	リストの向き。デフォルトでは、縦にリストを表示。falseにすることでリストを横向きに表示
keyExtractor	各アイテムの一意のキー
onDragEnd	アニメーションが完了した後に呼び出されます。アニメーション完了後のdataの並び順を更新する
renderItem	dataからアイテムを取得し、それをリストにレンダリングする。 renderItem内で設定する値を以下の表に記載

renderItem

onPressIn	{drag}を設定。タップすることでドラッグが可能。
onLongPress	{drag}を設定。長押しをすることでドラッグが可能。

5. まとめ

今回は、リスト表示方ドラッグ&ドロップのライブラリを紹介しました。簡単にドラッグ&ドロップを実装できることに感動しました。このライブラリを使うことでToDoListも作れそうですね(^^)

他にもドラッグ&ドロップを実装できるライブラリを紹介していますので、そちらの記事も是非、ご覧ください(^^)。