- キーボード上に”完了ボタン”や”アイコン”を設置したい
- “完了ボタン”や”アイコン”を押すことでキーボードを閉じたい
と言う方に向けて記事を書いていきます。
本記事を読むことで、下の画像のようにキーボード上の”完了ボタン”や”アイコン”を表示させ、タップすることでキーボードを閉じることができます。
1. 概要
今回は、キーボードの上にボタンを配置する方法について紹介していきます。
TextInputなどのテキストボックスで、テキスト入力を複数行設定にするとreturnキーでキーボードが閉じれなくなります。
そんな時に「キーボード上にキーボードを閉じるボタンを表示させたい」と思う方がいると思います。
その悩みを解決するのが、InputAccessoryViewコンポーネントです。
InputAccessoryViewコンポーネントとは?
キーボード上をカスタマイズできるようにするコンポーネントです。
このコンポーネントを使ってキーボード上にボタンを設置していきます。
公式ドキュメント: InputAccessoryView
2. 実装
2.1 サンプルコード
|
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 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, TouchableOpacity, Keyboard, InputAccessoryView, } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { title: "", } } render() { const inputAccessoryViewID = 'uniqueID'; return ( <View style={styles.container}> <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', }}> <Text style={{ fontSize: 24, color: "black", marginTop: 200 }}>テキストボックス</Text> <TextInput placeholder="入力してください" placeholderTextColor='hsla(210, 10%, 10%, 0.3)' value={this.state.title} multiline={true} style={styles.textBox} onChangeText={(text) => this.setState({ title: text })} inputAccessoryViewID={inputAccessoryViewID} /> </View> <InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor= "hsl(0, 0%, 95%)" > <View style={{ alignItems: "flex-end" }}> <TouchableOpacity style={styles.button} onPress={() => Keyboard.dismiss()}> <Text style={styles.buutonText}>完了</Text> </TouchableOpacity> </View> </InputAccessoryView> </View > ); } } const styles = StyleSheet.create({ container: { flex: 1, }, textBox: { width: "95%", height: 130, borderWidth: 1, borderColor: "black", paddingLeft: 5, marginTop: 15, fontSize: 20, }, button: { width: 60, alignItems: "center", padding: 10, }, buutonText: { fontSize: 18, fontWeight: "bold", color: "hsl(210, 100%, 60%)" } }); |
2.2 結果
3. サンプルコードについて解説
3.1 インポート
react-native’ライブラリからInputAccessoryViewコンポーネントをインポートします。
|
1 |
import { InputAccessoryView } from 'react-native'; |
3.2 InputAccessoryViewの使い方
InputAccessoryViewコンポーネントの使い方について解説していきます。
IDの宣言
まず、 公式ドキュメント の記載通りに const inputAccessoryViewID = ‘uniqueID’; を宣言します。
|
1 2 3 4 5 |
・・・ render() { const inputAccessoryViewID = 'uniqueID'; return ( ・・・ |
このinputAccessoryViewIDを使って、”TextInput”と”完了ボタン”を紐付けます。
テキストボックスの設定
テキストボックスで下記のようにIDを設定します。
このIDが書かれている＜TextInput＞のみキーボード上をカスタマイズすることができます。
|
1 2 3 4 |
<TextInput ・・・ inputAccessoryViewID={inputAccessoryViewID} /> |
完了ボタンの実装
＜InputAccessoryView＞コンポーネント内の処理がキーボード上に表示されます。
|
1 2 3 4 5 6 7 |
<InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor= "hsl(0, 0%, 95%)" > <View style={{ alignItems: "flex-end" }}> <TouchableOpacity style={styles.button} onPress={() => Keyboard.dismiss()}> <Text style={styles.buutonText}>完了</Text> </TouchableOpacity> </View> </InputAccessoryView> |
ここまでの手順でキーボード上にボタンを配置できました。
あとは、ボタンに処理を設定したら完成です。
3.3 キーボードを閉じる処理
Keyboardコンポーネントの.dismiss()メソッドを使うことでキーボードを閉じることができます。
ボタンのonPressプロパティに設定すれば、ボタンの押下時にキーボードを閉じる機能が完成です。
インポート
react-native’ライブラリからKeyboardコンポーネントをインポートします。
|
1 |
import { Keyboard } from 'react-native'; |
ボタンに設定
onPressに設定しましょう。
|
1 2 3 4 5 |
・・・ <TouchableOpacity style={styles.button} onPress={() => Keyboard.dismiss()}> <Text style={styles.buutonText}>完了</Text> </TouchableOpacity> ・・・ |
4. アイコンの表示方法
2.1 サンプルコードの文字列表示(Text)をアイコン(Icon)に変えてあげることで表示することができます
4.1 サンプルコード
|
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 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, TouchableOpacity, Keyboard, InputAccessoryView, } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; export default class App extends Component { constructor(props) { super(props); this.state = { title: "", } } render() { const inputAccessoryViewID = 'uniqueID'; return ( <View style={styles.container}> <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', }}> <Text style={{ fontSize: 24, color: "black", marginTop: 200 }}>テキストボックス</Text> <TextInput placeholder="入力してください" placeholderTextColor='hsla(210, 10%, 10%, 0.3)' value={this.state.title} multiline={true} style={styles.textBox} onChangeText={(text) => this.setState({ title: text })} inputAccessoryViewID={inputAccessoryViewID} /> </View> <InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor="hsl(0, 0%, 90%)" > <View style={{ flex: 1, flexDirection: "row" }}> <View style={{ flex: 1, flexDirection: "row" }}> {/* アイコン1 */} <View style={{ alignItems: "flex-start", flex: 1, marginLeft: 10 }}> <TouchableOpacity style={styles.button} onPress={() => console.log("処理1")}> <Icon name="favorite" size={30} color="hsl(0, 100%, 60%)" /> </TouchableOpacity> </View> {/* アイコン2 */} <View style={{ alignItems: "flex-start", flex: 2 }}> <TouchableOpacity style={styles.button} onPress={() => console.log("処理2")}> <Icon name="create" size={30} color="hsl(280, 100%, 50%)" /> </TouchableOpacity> </View> </View> {/* アイコン3 */} <View style={{ alignItems: "flex-end", flex: 1, marginRight: 10 }}> <TouchableOpacity style={styles.button} onPress={() => Keyboard.dismiss()}> <Icon name="cancel" size={30} color="hsl(210, 100%, 60%)" /> </TouchableOpacity> </View> </View> </InputAccessoryView> </View > ); } } const styles = StyleSheet.create({ container: { flex: 1, }, textBox: { width: "95%", height: 130, borderWidth: 1, borderColor: "black", paddingLeft: 5, marginTop: 15, fontSize: 20, }, button: { padding: 5, }, }); |
4.2 結果
4.3 参考
今回アイコンを表示する為にVectorIconを使っています。
VectorIconの使い方については、以前の記事を確認してください。
本記事の内容 アイコンを使ってみたい アイコンの表示のさせ方が分からない という方向けの記事となっています。 この記事を読むことで、このようにアイコンを表示できるようになります。 1. 概要 本記事で紹介するreact- …
5. まとめ
今回は、キーボード上のカスタマイズする方法として、InputAccessoryViewコンポーネントを紹介しました。簡単に実装することができるので、試しに実装してみることをオススメします(^^)
