3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【React Native】キーボード以外をタップするとキーボードが隠れるようにする

Last updated at Posted at 2019-04-21

キーボードが隠れない…

以下は店舗の名前を入れると検索してくれる画面のrender関数の中身(作りかけだけど…)。

RegisterScreen.js
    render() {
      return (
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.headerText}>
              店舗登録
            </Text>
          </View>
          <View  style={styles.inputContainer}>
              <TextInput
                  style={styles.inputBox}
                  onChangeText={(text) => this.setState({text})}
                  value={this.state.text}
                  placeholder="店舗名を入力してください"
                  clearButtonMode='while-editing'
                />
              <View style={styles.buttonContainer}>
                <TouchableOpacity style={styles.button}>
                  <Text style={styles.buttonText}>検索</Text>
                </TouchableOpacity>
              </View>
          </View>
          <View style={styles.cardContainer}
          >
          </View>
        </View>
      );
    }  

ここでTextInputの部分を画面上でタップするとキーボードが下に出てくる。
だがしかし、キーボード以外の部分をタップすれば隠れてくれると思っていた私は画面をタップして絶望した。
私「えいえい(画面タップ)」
キーボード「……」
私「えいえい(画面タップ)」
キーボード「……」
私「(0w0#)ナズェミデルンディス!オンドゥルルラギッタンディスカー!」(詳しくない方はオンドゥル語で検索)

ScrollViewを使えば解決できた!

色々探してもろくな情報がしかなく、最後の頼みの綱であるTwitterという泉に質問を投げてみたところ、
優しい女神のようなフォロワーさんがヌッと現れて教えてくれた。

このスクリーンを構成する一番大元になっているViewをScrollViewにするという方法である。

RegisterScreen.js
    render() {
      return (
        <ScrollView scrollEnabled={false} contentContainerStyle={{ flex: 1, justifyContent: 'center' }}>

           //…(中略:中身は前述のコードと同じです)…

        </ScrollView>
      );
    }  

もちろんコードの最初に

Register.js
import { ScrollView } from 'react-native';

ScrollViewをインポートすることをお忘れなく。

scrollEnabledはScrollViewの部分をスクロールさせるか否かを決めるパラメータ。
falseにすると画面がスクロールすることはなくなる(ScrollViewのくせに…)。
ただし、キーボードを隠すという目的においては別にtrueにしていても問題はないようだ。

あとScrollViewのスタイルはViewのようにstyleで指定するのではなく、
contentContainerStyleっていうもので指定する必要がある。
とは言っても「style=」の部分を変えるだけで特に大きな違いはない。

たったこれだけの変更でキーボード以外の部分をタップすればキーボードが勝手に隠れてくれるようになった。
ネットを見るとなんだか他にも方法は提示されているみたいだが、とりあえずはこれで十分かなと思っている。

優しい泉の女神様の教えを忘れないように備忘録としてここに書き刻んでおこうと思った次第である。

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?