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 というコンポーネントを使用して、キーボードで画面が隠れるのを防ぐ方法でした。

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

React Nativeのお仕事に関するご相談

Bageleeの運営会社、palanではReact Nativeに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

5

2

AUTHOR

ゲスト bagelee

ゲスト bagelee

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

asama

ando

iwasawa ayane

oshimo

yoko oshimo

異業界からやってきたデザイナー。palanARのUIをメインに担当してます。これからたくさん吸収していきます!

CONTACT PAGE TOP