ReactNativeAndroidでソフト入力モードを変更する

getdocs

2年前

React Native は、WebテクノロジーであるReactを使用してモバイルアプリケーションを簡単に作成できるようにすることで、Web開発者を支援します。すでにReactに精通している場合は、開始するのが簡単なので、これはすばらしいことです。

しかし、真実は、結局のところ、モバイルプラットフォームで開発しているため、完全にネイティブなアプリの開発に適用されるのと同じルールがReact Nativeを使用しても適用され、ブラウザーは現在コンテキストから外れています。

キーボードが開いたときの画面の動作

Androidは、デフォルトで、キーボードを開いたときにビューのサイズを変更します。これにより、その瞬間にやり取りしている入力に焦点を合わせ続けることができます。

たとえば、次の画像は、入力をクリックしたときの動作を示しています。

かっこいいですが、別の動作が必要な場合があります。たとえば、次のような位置を保存するコンポーネントがあるとします。

import React from "react";
import { View, Text, Button } from "react-native";
import AppInput from "./AppInput";

export default () => (
  <View style={{ flex: 1, justifyContent: "space-between" }}>
    <View style={{ flex: 1 }}>
      <AppInput
        label="Name"
        value=""
      />
      <AppInput
        label="Description 4"
        value=""
      />
      {/* ... */}
    </View>

    <View style={{ flexDirection: "row" }}>
      <View style={{ flex: 1, paddingRight: 3 }}>
        <Button
          color="#999"
          title="Cancel"
        />
      </View>
      <View style={{ flex: 1, paddingLeft: 3 }}>
        <Button title="Confirm" />
      </View>
    </View>
  </View>
)

次の画像に示すように、画面の下部に2つの入力と2つのボタンがある画面にレンダリングされます。

次に、最初の入力をクリックすると、キーボードの真上にあるボタンが押し上げられます。

ただし、Androidマニフェストを微調整して、デフォルトの動作を変更することはできます。

Androidマニフェスト

React Nativeアプリには、androidプロジェクトとiosプロジェクトの両方があります。それらが表示されない場合は、create-react-native-appを使用していて、まだイジェクトしていないことが原因である可能性がありますが、一度イジェクトすると、これらのプロジェクトにアクセスできるようになり、ネイティブの依存関係をインストールできるようになります。。

Androidプロジェクトには、 Androidマニフェストがあります。これは、権限、メタデータ、アクティビティプロパティなどのAndroidアプリケーションに関する情報を含むファイルです。

さまざまなデフォルトのプロパティの中で、android:windowSoftInputModeを見ることができます。これは、キーボードが開いたときのビューの動作を変更できるプロパティであり、デフォルトではadjustResizeの値になっています。

ボタンを押したままにし、画面が開いたときに画面のサイズを変更したり、画面を操作したりしないように変更する場合は、adjustPanに変更できます。

android / app / src / main / AndroidManifest.xml（部分的）

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan"
  ...
  > ... </activity>

次に、次のように表示されます。

まとめ

Androidでキーボードを開いたときの画面の動作を変更する方法を見てきました。このソリューションは、アプリケーションに対してグローバルであり、すばやく適用できます。

Androidドキュメントで、この動作に使用できるすべてのモードを確認できます。試してみてください！

涼しくしてください🦄