- buttonコンポーネントを使わずにボタンを作りたい人
- ボタンのカスタマイズができずに困っている人
という疑問、悩みをお持ちの方向けの記事になっています。
本記事では、以下のようなボタンを作っていきます。
1. 概要
ReactNativeには、ボタンを簡単に作ることができるようにBottonコンポーネントが用意されていますが、色が変更できなかったり、大きさが変更できなかったりします。
ボタンの「色」や「大きさ」を自由に変更したい時は、Touchable系のコンポーネントを使うことで、好きなようにボタンを作ることができます。
本記事は、そのTouchable系のコンポーネントについて解説していきます。
2. Touchable系コンポーネント
Touchable系コンポーネントは、以下の3種類のコンポーネントがあります。1. TouchableHighlight
2. TouchableOpacity
3. TouchableWithoutFeedback
これらについて順番に解説していきます。
2.1 TouchableHighlight
TouchableHighlightの特徴
Viewコンポーネントにボタンのような機能を持たせることができ、ボタンを押した時に、色をつけつことができるのが特徴です。
公式ドキュメント：TouchableHighlight
結果
サンプルコード
|
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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
import React from 'react'; import { StyleSheet, Text, View, TouchableHighlight } from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> {/* ボタン1 */} <TouchableHighlight style = {styles.button1} onPress= {() => console.log("press1")} activeOpacity={0.6} underlayColor="gray" > <Text style = {styles.fontStyle}>button1</Text> </TouchableHighlight> {/* ボタン2 */} <TouchableHighlight style = {styles.button2} onPress= {() => console.log("press2")} activeOpacity={0.6} underlayColor="lightblue" > <Text style = {styles.fontStyle}>button2</Text> </TouchableHighlight> {/* ボタン3 */} <TouchableHighlight style = {styles.button3} onPress= {() => console.log("press3")} activeOpacity={0.6} underlayColor="lightgray" > <Text style = {[styles.fontStyle, {color: "black"}]}>button3</Text> </TouchableHighlight> {/* ボタン4 */} <TouchableHighlight style = {styles.button4} onPress= {() => console.log("press4")} activeOpacity={0.6} underlayColor="pink" > <Text style = {styles.fontStyle}>button4</Text> </TouchableHighlight> {/* ボタン5 */} <TouchableHighlight style = {styles.button5} onPress= {() => console.log("press4")} activeOpacity={0.6} underlayColor="gray" > <Text style = {styles.fontStyle}>button5</Text> </TouchableHighlight> {/* ボタン6 */} <TouchableHighlight style = {styles.button6} onPress= {() => console.log("press4")} activeOpacity={0.6} underlayColor="lightgray" > <Text style = {[styles.fontStyle, {fontSize: 40}]}>+</Text> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 100 }, button1: { backgroundColor: "black", padding: 20, width: "40%", alignSelf: "center", marginTop: 50, }, button2: { backgroundColor: "blue", padding: 10, width: "40%", alignSelf: "center", marginTop: 50, }, button3: { backgroundColor: "white", padding: 10, width: "40%", alignSelf: "center", marginTop: 50, borderWidth: 1, borderColor: "black", }, button4: { backgroundColor: "tomato", padding: 20, width: "40%", alignSelf: "center", marginTop: 50, borderWidth: 1, borderColor: "white", borderRadius: 15, }, button5: { backgroundColor: "black", padding: 20, width: "40%", alignSelf: "center", marginTop: 50, shadowColor: "black", shadowOffset: { height: 4, width: 4 }, shadowRadius: 5, shadowOpacity: 0.8, }, button6: { backgroundColor: "lime", padding: 10, width: 70, alignSelf: "center", marginTop: 50, borderWidth: 1, borderColor: "white", borderRadius: 50, }, fontStyle: { color: "white", alignSelf: "center", fontSize: 24, } }); |
プロパティ
TouchableHighlightプロパティ
| onPress | ボタンを押した時のイベントを設定する。設定していない場合、ボタンとして機能しない。 |
| activeOpacity | ボタンを押した時に透過される割合を設定する。設定値は、0から1までの値を設定する。 設定しない場合は、デフォルト値の0.85が設定される。 |
| underlayColor | ボタンを押した時の色を設定。設定していない場合は、黒が設定される。 |
2.2 TouchableOpacity
TouchableOpacityの特徴
TouchableHighlightと基本的に同じ機能を持っているが、違う点として、ボタンを押した時の色を指定できないところです。(色指定はできないですが、透過具合の変更は可能です。)
公式ドキュメント：TouchableOpacity
ちょっと画像が見にくいと思いますが・・・
2.3 TouchableWithoutFeedback
TouchableWithoutFeedbackの特徴
公式ドキュメントに「特別な理由がない限り使用しないでください。」と書かれているため、私は、使ったことがないですね。
公式ドキュメント：TouchableWithoutFeedback
3. FAB
Touchable系コンポーネントの他にボタンを作成することができるライブラリです。デザインが好きで、このライブラリを使うこともあります。
3.1 react-native-fabインストール方法
下記のコマンドでreact-native-fabライブラリをインストールできます。
|
1 |
npm install --save react-native-fab |
ぜひ、一度試してみてください。
react-native-fab
4. まとめ
Buttonコンポーネントを使って、ボタンを作成しても良いですが、個人的には、好きなようにカスタマイズができる「TouchableHighlight」コンポーネントでボタンを作成するのがお勧めですね!
“【ReactNative】ボタンの作り方_Touchable系コンポーネントを使ってみた” への1件のフィードバック