iPhoneでのキーボード操作を最適化する。TextInputのキーボード回避、閉じる操作、入力補助を実装する。「キーボード対応して」「入力画面を直して」「キーボードが被る」などのリクエストで使用する。
TextInput を含む画面に対して、iPhoneでの快適なキーボード操作を実装する。
本プロジェクトは @callstack/liquid-glass による Liquid Glass デザインを前提とする。
キーボード周りの実装では以下を考慮する:
LiquidGlassView 内の TextInput は、ガラスエフェクトのブラーでプレースホルダーが見づらくなる可能性がある。テキストカラーに PlatformColor('labelColor') を使用するLiquidGlassView を適用し、ガラス質感を統一するisLiquidGlassSupported が false の場合は半透明背景に切り替えるsrc/screens/**/*.tsx — 画面コンポーネントsrc/components/**/*.tsx — フォーム系コンポーネント引数が指定された場合はその画面のみ、省略時は TextInput を含む全画面を対象とする。
TextInput を含むファイルを検索する:
Grep: "TextInput" in src/screens/ and src/components/
TextInput を含む画面のルートに KeyboardAvoidingView を追加する。
パターン:
import { KeyboardAvoidingView, Platform } from 'react-native';
// 画面コンポーネントのルートに追加
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
>
{/* 既存のコンテンツ */}
</KeyboardAvoidingView>
TextInput を含む ScrollView に以下を追加:
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerStyle={{ flexGrow: 1 }}
>
各 TextInput に以下のプロパティを適切に設定する:
| 入力の種類 | returnKeyType | autoCapitalize | keyboardType | textContentType |
|---|---|---|---|---|
| ユーザー名 | next or done | none | default | username |
| メール | next or done | none | email-address | emailAddress |
| パスワード | done | none | default | password / newPassword |
| 検索 | search | none | default | — |
| 複数行テキスト | default | sentences | default | — |
onSubmitEditing={() => Keyboard.dismiss()}useRef で次のフィールドにフォーカス移動TouchableWithoutFeedback + Keyboard.dismiss()複数フィールドのフォーカス移動パターン:
import { useRef } from 'react';
import { TextInput, Keyboard } from 'react-native';
const emailRef = useRef<TextInput>(null);
const passwordRef = useRef<TextInput>(null);
<TextInput
placeholder="ユーザー名"
returnKeyType="next"
onSubmitEditing={() => emailRef.current?.focus()}
blurOnSubmit={false}
/>
<TextInput
ref={emailRef}
placeholder="メールアドレス"
returnKeyType="next"
onSubmitEditing={() => passwordRef.current?.focus()}
blurOnSubmit={false}
/>
<TextInput
ref={passwordRef}
placeholder="パスワード"
returnKeyType="done"
onSubmitEditing={() => Keyboard.dismiss()}
/>
<TextInput
secureTextEntry={!showPassword}
textContentType="password"
autoComplete="password"
autoCorrect={false}
/>
Platform.OS で iOS / Android を分岐し、behavior を適切に設定するkeyboardVerticalOffset はヘッダー高さに応じて調整する