メインコンテンツへスキップ

ユーザーエクスペリエンスの向上

テキスト入力の設定​

タッチフォンのテキスト入力は、小さい画面やソフトウェアキーボードのため、難しい作業です。しかし、必要なデータの種類に基づいて、テキスト入力プロパティを適切に設定することで、この作業をより簡単にすることができます。

  • 最初のフィールドに自動的にフォーカスする
  • 期待されるデータ形式の例としてプレースホルダーテキストを使用する
  • 自動大文字変換と自動修正の有効化または無効化
  • キーボードの種類を選択する（例：メール、数字）
  • リターンボタンが次のフィールドにフォーカスするか、フォームを送信することを確認する

その他の設定オプションについては、TextInput のドキュメントをご覧ください。

キーボード表示時のレイアウト管理​

ソフトウェアキーボードは画面のほぼ半分を占めます。キーボードによって隠れる可能性のあるインタラクティブ要素がある場合は、KeyboardAvoidingView コンポーネントを使用して、それらが引き続きアクセス可能であることを確認してください。

タップ可能な領域を広くする​

携帯電話では、ボタンを押す際に非常に正確にするのは難しいです。すべてのインタラクティブ要素が44x44以上であることを確認してください。これを行う1つの方法は、要素に十分なスペースを確保することです。padding、minWidth、minHeightのスタイル値がこれに役立ちます。または、レイアウトに影響を与えることなくインタラクティブ領域を増やすためにhitSlop プロパティを使用することもできます。デモはこちら

Android Ripple を使用する​

Android API 21+ は、ユーザーが画面上の操作可能な領域に触れたときにフィードバックを提供するためにマテリアルデザインのリップルを使用します。React Native は、TouchableNativeFeedback コンポーネントを介してこれを公開しています。不透明度やハイライトの代わりにこのタッチ効果を使用すると、多くの場合、アプリがプラットフォームに非常によくフィットしているように感じられます。ただし、これは iOS または Android API < 21 では動作しないため、使用する際には注意が必要です。iOS では他の Touchable コンポーネントのいずれかにフォールバックする必要があります。react-native-platform-touchable のようなライブラリを使用して、プラットフォームの違いを処理できます。

画面の向きロック​

Dimensions API を使用していて向き変更を処理していない場合を除き、複数の画面の向きはデフォルトで問題なく動作するはずです。複数の画面の向きをサポートしたくない場合は、画面の向きをポートレートまたはランドスケープのいずれかにロックできます。

iOSでは、Xcodeの「General」タブと「Deployment Info」セクションで、サポートしたいデバイスの向きを有効にしてください（変更を行う際には、DevicesメニューからiPhoneを選択していることを確認してください）。Androidでは、AndroidManifest.xmlファイルを開き、アクティビティ要素内に'android:screenOrientation="portrait"'を追加してポートレートにロックするか、'android:screenOrientation="landscape"'を追加してランドスケープにロックします。

さらに学ぶ

マテリアルデザインとヒューマンインターフェースガイドラインは、モバイルプラットフォーム向けのデザインについてさらに学ぶための素晴らしいリソースです。