Viewをタップした時TextInputのfocusを外してKeyBoardを隠す【ReactNative】

どうも。てちこまです。

夏休み以降、ゴロゴロしてたらもうすぐ秋ですね。つら...

今回はタイトル通りReactNativeでinputのfocusを外す方法をご紹介いたします。

react-native-elementsのTextInputを利用していますがデフォルトのものでも大丈夫です。

コード一部抜粋

こんな感じでInputが配置してあるとします。

Viewを<TouchableWithoutFeedback/>で囲いましょう。

コード一部抜粋

これで赤枠内の青枠と右下のボタン以外をタップするとfocusが外れてKeyboardが隠れます。

特定のButtonタップや特定の動作でキーボードを隠したい時などはMethodにKeyboard.dismiss()を忍ばせるといい感じに動作します。

Keyboard.dismiss()公式

てちこま

高卒後3年ニート。 起死回生でコン専入学。 資格とったり、アプリ作ったりしてました。 2020から新米WEBエンジニアになりました。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする