- おしゃれなボタンを作りたい
- ツイッターのようなボタンを作りたい(アニメーション付ボタン)
と言うボタンを作りたいと思っている方向けの記事になっています。
記事を読むことで下の動画のようなにボタンを作ることができます。
1. 概要
今回は、react-native-action-buttonライブラリを使ってアクションボタンを紹介していきます。
下記にgithubのリンクを貼っておきます。
react-native-action-button
2. インストール方法
下記のコマンドを実行してreact-native-action-buttonをインストールします。
|
1 |
$ npm install --save react-native-action-button |
3. 使い方
3.1 import
‘react-native-action-button’ライブラリからActionButtonコンポーネントをインポートします。
|
1 |
import ActionButton from 'react-native-action-button'; |
3.2 ボタンの追加方法
インポートしたActionButtonコンポーネントを使ってボタンを追加していきます。
- ActionButton: アクションボタンの非表示/表示を切り替えるメインボタン
- ActionButton.Item: メインボタンをタップした時に表示されるアクションボタンを指定。少なくとも1つ以上ボタンを作成する必要がある。
3.3 プロパティ
本ライブラリを使う時に設定するプロパティを紹介します。
＜ActionButton＞のプロパティ
| size | ボタンのサイズ |
| buttonColor | ボタンの背景色 |
| onPress | ボタンがタップされた時にイベントが発生 |
| degrees | アイコンを回転させる角度(初期値は135) |
| buttonTextStyle | ボタンのスタイル。アイコンサイズが変更可能 |
| autoInactive | ActionButton.Itemが押されたときにActionButtonを自動的に非表示にする。 |
| buttonText | ボタンにテキスト表示 |
| icon | ボタンのアイコン |
＜ActionButton.Item＞のプロパティ
| size | ボタンのサイズ |
| buttonColor | ボタンの背景色 |
| onPress | ボタンがタップされた時にイベントが発生 |
| title | ボタンの横に表示される文字列 |
| textStyle | テキストのスタイル |
| textContainerStyle | ボタンの横に表示されるテキストの枠の大きさを変更 |
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 |
import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import ActionButton from 'react-native-action-button'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; export default class App extends React.Component { constructor(props) { super(props); this.state = { backColor: "white", // 背景色 } } render() { return ( <View style={{flex:1, backgroundColor: this.state.backColor}}> <ActionButton buttonColor="hsla(0, 100%, 60%, 0.8)" autoInactive={false} size={75} buttonTextStyle={{fontSize: 45}} > {/* --- ボタン1 --- */} <ActionButton.Item buttonColor='hsla(210, 100%, 60%, 0.9)' title="blue" onPress={() => this.setState({backColor: "hsla(210, 100%, 60%, 0.4)"})} > <Icon name="cloud-outline" style={styles.actionButtonIcon} /> </ActionButton.Item> {/* --- ボタン2 --- */} <ActionButton.Item buttonColor='hsla(60, 100%, 60%, 0.9)' title="yellow" onPress={() => this.setState({backColor: "hsla(60, 100%, 60%, 0.4)"})} > <Icon name="lightbulb-on-outline" style={styles.actionButtonIcon} /> </ActionButton.Item> {/* --- ボタン3 --- */} <ActionButton.Item buttonColor='hsla(120, 100%, 60%, 0.9)' title="green" onPress={() => this.setState({backColor: "hsla(120, 100%, 60%, 0.4)"})} > <Icon name="palette-outline" style={styles.actionButtonIcon} /> </ActionButton.Item> </ActionButton> </View> ); } } const styles = StyleSheet.create({ actionButtonIcon: { fontSize: 35, height: 35, color: 'white', }, }); |
5. まとめ
かなり自分好みにカスタマイズできるほどプロパティも豊富でおすすめのライブラリです。
