2018年12月6日

プログラミング

【React Native】キーボードで画面が隠れる場合の対処法

目次

  1. はじめに
  2. 画面がキーボードで隠れてしまう状態とは
  3. KeyboardAvoidingViewを使ってキーボードを避ける
  4. まとめ

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay6です!

昨日は、RucksackというCSSライブラリを使ってレスポンシブタイポグラフィーを実装する方法についての記事でした。

Rucksackでレスポンシブタイポグラフィーを実装する

今回は、React Nativeで TextInput コンポーネントにフォーカスされたとき、ソフトウェアキーボードで画面が隠れてしまうのを防ぐ方法をご紹介します。

サンプルコードのReact Nativeのバージョンは 0.57.7です。

画面がキーボードで隠れてしまう状態とは

まずは下記のgif画像をご覧ください。

今回は、このように画面の中央に TextInput があり、画面下部に決定ボタンがあるレイアウトで説明していきたいと思います。

error.gif (926.3 kB)

こちらの画面のコードは以下になります。
(キーボードの表示部分に関わらないスタイルは省略しています)

<View style={{ flex: 1 }}>
  <View style={{ height: 100 }}>
    <Text>Header</Text>
  </View>
  <View style={{ flex: 1 }} >
    <TextInput />
  </View>
  <TouchableOpacity style={{ height: 60 }}>
    <Text>Submit</Text>
  </TouchableOpacity>
</View>

ヘッダーと下部のボタンは高さ固定です。
TextInput がある中央の要素には flex プロパティを指定しており、高さが可変になっています。

このままだと、gif画像のように TextInput にフォーカスがあたったときに決定ボタンがキーボードで隠れてしまいます。

キーボードが表示された状態でも決定ボタンを隠さずに見せたいですよね。

それでは、キーボードが表示された状態でも決定ボタンが見えるようにする方法をご紹介します。

KeyboardAvoidingViewを使ってキーボードを避ける

React Nativeでキーボードによって画面が隠れるのを防ぐには、 KeyboardAvoidingView というコンポーネントを利用します。
https://facebook.github.io/react-native/docs/keyboardavoidingview

この KeyboardAvoidingView でキーボードによって隠れるのを避けたい要素を囲うだけです。

実際にコードを見てみましょう。

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
  <View style={{ height: 100 }}>
    <Text>Header</Text>
  </View>
  <View style={{ flex: 1 }} >
    <TextInput />
  </View>
  <TouchableOpacity style={{ height: 60 }}>
    <Text>Submit</Text>
  </TouchableOpacity>
</View>

ここでポイントになるのが、 behavior propsのプロパティです。
このプロパティの設定によって、キーボードを避ける際の動きが変わります。

behavior のプロパティに指定できるのは、以下の3つです。

  • padding
  • height
  • position

それでは、それぞれプロパティを設定したときにどんな動きをするようになるのか、ご紹介します。

padding・height を設定した場合

behavior にpadding・heightを設定した場合は、以下のような動きになります。

padding.gif (823.3 kB)

flex を指定した真ん中の要素が、キーボードの出現に合わせて伸縮するようになりました。

POINT!!

  • paddingとheightを指定した際に大きな違いはありません。
    heightを指定すると、Androidの場合はキーボードが非表示になってもキーボードの高さが空いたままになります。(iOSも少し前のバージョンまでは同じ挙動だったので、今後Androidも変更されるかもしれません)
  • 中身のコンテンツ全てに heightを指定すると、キーボードが表示されても中身の要素は伸縮されません。
    flexを指定した要素のみが伸縮するようになる、ということに気をつけてください。

それでは次に、positionを設定した場合について見ていきましょう。

positionを設定した場合

behavior にpositionを設定する場合は、 contentContainerStyle propsの設定もする必要があります。

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior="position"
  contentContainerStyle={{ flex: 1 }}
>
  (省略)
</KeyboardAvoidingView>

behavior にpositionを設定すると、 KeyboardAvoidingView の中身が View コンポーネントで囲われるようになります。
contentContainerStyle propsには、その View に対するスタイルを指定します。

flexheightを指定しないと、中身が潰れて見えなくなってしまうので注意が必要です。

この場合の挙動は以下のようになります。

position.gif (712.3 kB)

padding・heightを指定したときとは違い、画面全体が上に押し上げられていますよね。

細かいスタイルを指定したいときなどは、 behavior にpositionを設定すると良いと思います。

まとめ

以上が KeyboardAvoidingView というコンポーネントを使用して、キーボードで画面が隠れるのを防ぐ方法でした。

キーボードで画面が隠れてしまって困っているときには、ぜひこの記事を参考に対応してみてください。

0

0

AUTHOR

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

CONTACT PAGE TOP