Viewをタップした時TextInputのfocusを外してKeyBoardを隠す【ReactNative】
どうも。てちこまです。
夏休み以降、ゴロゴロしてたらもうすぐ秋ですね。つら...
今回はタイトル通りReactNativeでinputのfocusを外す方法をご紹介いたします。
※react-native-elementsのTextInputを利用していますがデフォルトのものでも大丈夫です。
コード一部抜粋
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<SafeAreaView> <Input containerStyle={styles.inputContainerStyle} placeholder="タスクのタイトル" label="タイトルを入力" /> <Input containerStyle={styles.inputContainerStyle} placeholder="説明を入力※省略可" label="タスクの説明" /> </SafeAreaView> |
こんな感じでInputが配置してあるとします。
Viewを<TouchableWithoutFeedback/>
コード一部抜粋
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => { Keyboard.dismiss() }}> <SafeAreaView> <Input containerStyle={styles.inputContainerStyle} placeholder="タスクのタイトル" label="タイトルを入力" /> <Input containerStyle={styles.inputContainerStyle} placeholder="説明を入力※省略可" label="タスクの説明" /> </SafeAreaView> </TouchableWithoutFeedback> |
これで赤枠内の青枠と右下のボタン以外をタップするとfocusが外れてKeyboardが隠れます。
特定のButtonタップや特定の動作でキーボードを隠したい時などはMethodにKeyboard.dismiss()
