- ドラッグ&ドロップを実装したい
- 状態遷移できるアプリを作りたい
と言うものを作りたいと思っている方向けの記事になっています。
記事を読むことで下の動画のようなボタンを実装することができます。
1. 概要
今回は、react-native-draganddrop-boardライブラリを紹介していきます。
react-native-draganddrop-boardライブラリ
react-native-draganddrop-boardライブラリは、状態遷移のドラッグ&ドロップを簡単に実装することができるライブラリです。プロパティも豊富ですので、カスタマイズもでき、自分好みのスイッチを作ることが可能です。下記にgithubのリンクを貼っておきます。
react-native-draganddrop-board
2. インストール方法
下記のコマンドを実行してreact-native-switch-selectorライブラリをインストールします。
|
1 |
$ npm install --save react-native-draganddrop-board |
3. 使い方
3.1 import
‘react-native-draganddrop-board’ライブラリから{Board, BoardRepository}コンポーネントをインポートします。
|
1 |
import { Board, BoardRepository } from 'react-native-draganddrop-board' |
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; import { Board, BoardRepository } from 'react-native-draganddrop-board' import { Header } from 'react-native-elements'; import Icon from 'react-native-vector-icons/Feather'; const data = [ { id: 1, name: 'TO DO', rows: [ { id: '1', name: 'Analyze your audience', description: 'Learn more about the audience to whom you will be speaking' }, { id: '2', name: 'Select a topic', description: 'Select a topic that is of interest to the audience and to you' }, { id: '3', name: 'Define the objective', description: 'Write the objective of the presentation in a single concise statement' } ] }, { id: 2, name: 'IN PROGRESS', rows: [ { id: '4', name: 'Look at drawings', description: 'How did they use line and shape? How did they shade?' }, { id: '5', name: 'Draw from drawings', description: 'Learn from the masters by copying them' }, { id: '6', name: 'Draw from photographs', description: 'For most people, it’s easier to reproduce an image that’s already two-dimensional' } ] }, { id: 3, name: 'DONE', rows: [ { id: '7', name: 'Draw from life', description: 'Do you enjoy coffee? Draw your coffee cup' }, { id: '8', name: 'Take a class', description: 'Check your local university extension' } ] } ] const boardRepository = new BoardRepository(data); export default class App extends React.Component { render() { return ( <View style={{ flex: 1, backgroundColor: "lightgray"}}> <Header centerComponent={{ text: 'Board', style: { color: 'lightblue', fontSize: 24, fontFamily: 'Baskerville-Bold', marginTop: 13, }} } containerStyle={{ backgroundColor: "black", justifyContent: 'space-around', }} statusBarProps={{ barStyle: 'light-content' }} barStyle="light-content" /> <Board boardRepository={boardRepository} boardBackground="lightgray" open={() => {}} onDragEnd={() => {}} cardContent={(item) => ( <View style={{flexDirection: "row"}}> <Text>{item.name}</Text> <Icon name="align-justify" size={18} style={{position: "absolute", right: 0}} /> </View> )} // columnHeight={{}} cardIconColor="black" /> </View> ); } } |
3.3 プロパティ
本ライブラリを使う時に設定するプロパティを一部紹介します。
大きく4つのコンポーネントに分けて、カスタマイズすることができます。
＜Board＞コンポーネントのプロパティ
| boardRepository | データを保持するオブジェクト |
| boardBackground | ボードの背景色 |
| open | アイテムが押されたときに呼び出される関数は、アイテムを返す。 必須プロパティ。空でも可。 |
| onDragEnd | ドラッグが終了したときに呼び出される関数。 必須プロパティ。空でも可。 |
＜Card＞コンポーネントのプロパティ
| cardContent | 別のコンポーネントを使用してカードをカスタマイズすることができる。 テキスト表示からアイコン表示まですることができる |
| cardNameTextColor | 最初の行の色 |
| cardNameFontSize | 最初の行のフォントサイズ |
| cardDescriptionTextColor | 2行目の色 |
| cardDescriptionFontSize | 2行目のフォントサイズ |
| cardBackground | カードの背景色 |
＜Column＞コンポーネントのプロパティ
| badgeBackgroundColor | カウントバッジの背景色 |
| badgeHeight | カウントバッジの高さ |
| badgeWidth | カウントバッジの幅 |
| BadgeTextColor | カウントバッジのテキストの色 |
| columnHeight | ボードの高さ |
| columnNameTextColor | ボード名の色 |
| isWithCountBadge | falseの場合、カウントバッジは表示しない。 |
＜Empty column＞コンポーネントのプロパティ
| emptyIconColor | アイコンの色 |
| emptyTextColor | テキストの色 |
| emptyFontSize | テキストのフォントサイズ |
5. まとめ
状態遷移できるドラッグ&ドロップを簡単に実装でき、デフォルトのデザインもよく、かなりおすすめのライブラリです。
他にもドラッグ&ドロップを実装できるライブラリを紹介していますので、そちらの記事も是非、ご覧ください(^^)。
本記事の内容 ドラッグ&ドロップを実装したい人 と言う方向けの記事になっています。 本記事を読むことで、このように実装することができます。 1. 概要 今回は、react-native-draggable-gri …
本記事の内容 ドラッグ&ドロップ可能なリストを実装したい人 と言う方向けの記事になっています。 記事を読むことで下の動画のようなに実装することができます。 1. 概要 前回に引き続き、ドラッグ&ドロップ …
