- ドラッグ&ドロップを実装したい人
と言う方向けの記事になっています。
本記事を読むことで、このように実装することができます。
1. 概要
今回は、react-native-draggable-gridライブラリについて紹介していきます。
react-native-draggable-gridライブラリ
react-native-draggable-gridライブラリは、ドラッグ&ドロップを簡単に実装することができるライブラリです。下記にgithubのリンクを貼っておきます。
react-native-draggable-grid
2. インストール方法
下記のコマンドを実行してreact-native-draggable-gridライブラリをインストールします。
|
1 |
$ npm install --save react-native-draggable-grid |
3. 使い方
3.1 import
‘react-native-draggable-grid’ライブラリから「DraggableGrid」コンポーネントをインポートします。
|
1 |
import { DraggableGrid } from 'react-native-draggable-grid'; |
4. 実装
サンプルコード
|
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 60 61 62 63 64 65 66 67 68 |
import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import { DraggableGrid } from 'react-native-draggable-grid'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; export default class App extends React.Component { constructor(props) { super(props); this.state = { data:[ {name:'0',key:'zero'}, {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:<Icon name="weather-sunny" size={50} color='hsla(0, 90%, 50%, 0.8)'/>,key:'eight'}, {name:<Icon name="weather-night" size={50} color='hsla(60, 90%, 50%, 0.8)'/>,key:'night'}, {name:<Icon name="weather-pouring" size={50} color='hsla(240, 90%, 50%, 0.8)'/>,key:'ten'}, {name:<Icon name="weather-snowy" size={50} color='hsla(180, 90%, 50%, 0.8)'/>,key:'eleven'}, ], }; } render() { return ( <View style={styles.wrapper}> <DraggableGrid numColumns={4} renderItem={(item)=> <View style={styles.item} key={item.key}> <Text style={styles.item_text}>{item.name}</Text> </View> } data={this.state.data} onDragRelease={(data) => { this.setState({data}); }} /> </View> ); } } const styles = StyleSheet.create({ wrapper:{ paddingTop:100, width:'100%', height:'100%', justifyContent:'center', }, item:{ width:100, height:100, borderRadius:8, backgroundColor:'hsla(210, 90%, 50%, 0.7)', justifyContent:'center', alignItems:'center', }, item_text:{ fontSize:40, color:'#FFFFFF', }, }); |
4.1 プロパティ
本ライブラリを使う時に設定するプロパティを一部紹介します。
＜DraggableGrid＞のプロパティ
| data | 表示するデータ群 |
| renderItem | dataからアイテムを取得し、それをリストにレンダリングする |
| numColumns | レンダリングさせる列を指定 |
| onItemPress | 項目をタップした時に発生するイベントを設定 |
| onDragStart | 項目をドラッグし始めたタイミングで発生するイベントを設定 |
| onDragRelease | 項目を並び替えたタイミングで発生するイベントを設定 (実装では、項目を並び替えたタイミングでデータの並びを再保存する) |
5. 参考
実装で使われているアイコンは、react-native-vector-iconsライブラリを使用しています。vector-iconsライブラリについて知りたい方は、以前の記事を確認してください。
本記事の内容 アイコンを使ってみたい アイコンの表示のさせ方が分からない という方向けの記事となっています。 この記事を読むことで、このようにアイコンを表示できるようになります。 1. 概要 本記事で紹介するreact- …
6. まとめ
今回は、react-native-draggable-gridライブラリを使ってのドラッグ&ドロップの実装でした。dataに値を設定し、レンダリング方法を設定するだけで簡単に実装できると言う点が素晴らしいですね。
他にもドラッグ&ドロップを実装できるライブラリを紹介していますので、そちらの記事も是非、ご覧ください(^^)。
本記事の内容 ドラッグ&ドロップ可能なリストを実装したい人 と言う方向けの記事になっています。 記事を読むことで下の動画のようなに実装することができます。 1. 概要 前回に引き続き、ドラッグ&ドロップ …
本記事の内容 ドラッグ&ドロップを実装したい 状態遷移できるアプリを作りたい と言うものを作りたいと思っている方向けの記事になっています。 記事を読むことで下の動画のようなボタンを実装することができます。 1. …
“【ReactNative】react-native-draggable-gridを使ってドラッグ&ドロップを実装してみた” への3件のフィードバック