あなたはここにいるのは、簡単なフィールドが簡単ではないはずなのに簡単ではないからでしょう。キーボードが入力に覆われています。iOSはAndroidとは異なるテキストをレンダリングしています。制御フィールドをクリアしても、ユーザーが見るものは常にクリアされません。基本的なログインフォームはデバッグセッションに変わります。
それは React NativeのTextInputの性質です. このモバイルアプリの最も使用されるコンポーネントですが、レイアウト、ネイティブキーボードの動作、検証、アクセシビリティ、プラットフォーム固有のレンダリングの交差点に位置しています。 チームは、ハッピーパスを迅速に学び、ドキュメントがほとんど言及しない粗いエッジに時間を浪費します。
このガイドは、実稼動に耐えるパターンに焦点を当てています。 基本的なものもカバーしていますが、通常はQAが両プラットフォームでテストを開始した後に出現する未文書化のバグやエッジケースも含めています。 その場合、チームがモバイルワークをロケーション間でどのように分割するかを決定している場合、 オフショア開発のためのTekRecruiterのガイド 入力重視の機能は、実装基準が明確でない場合に、実際に分解されるのはそのような作業だからです。 より広範なアーキテクチャのコンテキストについては、この クロスプラットフォームモバイルアプリ開発ガイド は、近くに保管しておく価値があります。
目次
- モバイルフォームの基本構成要素
- TextInputの基本とクイックリファレンス
- 基本的なテキスト入力パターンと例
- 制御されたコンポーネントと非制御されたコンポーネントの深掘り
- キーボードとフォーカスのマスター
- __CAPGO_KEEP_2__
- __CAPGO_KEEP_5__
- __CAPGO_KEEP_9__
モバイルフォームの基礎
__CAPGO_KEEP_0__
テキスト入力は、すべてのモバイル製品に依存しています。ログイン、サインアップ、検索、チェックアウト、プロフィール編集、サポートチケット、管理ツール、医療入力、フィールドオペスフォーム。すべてが同じ基本的な原理に依存しています。 __CAPGO_KEEP_0__ TextInput React Native
の難しさは、コンポーネントツリーで小さく見えますが、多くの責任を負っています。状態と同期し、ネイティブキーボードと協力し、iOSとAndroidで一貫した動作をし、検証フィードバックを早く公開し、利用可能にする必要があります。どれか一つが崩れると、ユーザーはそれをすぐに感じます。
__CAPGO_KEEP_0__
このコンポーネントが過度に痛みを与える理由
破損したボタンは明らかです。テキストフィールドが破損すると、ユーザーはタップ、タイプ、そしてアプリが信頼できるものであると仮定します。テキストが消失したり、フォーカスがジャンプしたり、キーボードがフィールドをブロックしたりすると、信頼が急速に低下します。 __CAPGO_KEEP_0__
コンポーネントはネイティブの動作に近い位置にあります。つまり、バグはReactの状態フロー、スタイリング、プラットフォームのデフォルト、またはネイティブのイベントハンドリングから来る可能性があります。汚いJavaScriptを書いても、フィールドが2つのデバイスで異なる動作をすることになる可能性があります。
__CAPGO_KEEP_0__
- 予測可能な状態フロー： アプリケーションの状態を常に反映するようにしてください。
- 信頼できる検証タイミング： エラーは、迷惑ではなく、有益なときに表示されるべきです。
- プラットフォームの強度： iOSとAndroidには、意図的に同期する必要があります。
- デバッグ可能な動作： 何かが壊れたとき、修正はローカルで理解できるべきです。
なぜなら、ベストのチームは、入力パターンを標準化することで、後で大量の変更を防ぐことができるからです。共有のラッパー、検証プロパティの命名規則、キーボードのルールの小さなセットは、驚くほど多くの変更を防ぐことができます。
テキスト入力の基本とクイックリファレンス
A TextInput looks simple until it starts fighting the screen around it. One field can trigger stale state, keyboard oddities, autofill surprises, and platform-specific behavior that is not obvious from the prop list alone. Teams save time by standardizing the baseline API early.
デフォルトでは制御入力を使用しますが、そのコストと利益を理解する必要があります。制御フィールドは、レンダリングされた値を React ステートと結びつけるため、検証、リセット、プリフィル、クロスフィールド規則の予測性を提供します。ただし、すべてのキーストロークはレンダリングパスを通らなければなりません。したがって、低エンドのAndroidデバイスで実行する場合、各変更ごとに高価なフォーマットまたは検証ロジックが遅延を引き起こす可能性があります。
よく使用するプロップ
ほとんどの生産的なフォームでは、基本的なセットアップは依然として value, onChangeText, placeholderです。 このトリオは一般的なパスをカバーしますが、周囲のプロップは、フィールドがネイティブで感じられるか、フラストレーションを感じさせるかを決定します。
実装とバグのトリアージの際に、すぐに参照するクイックリファレンスです。
| プロップ | タイプ | 説明 |
|---|---|---|
value |
文字列 | 入力フィールドで表示される現在のテキストです。制御フィールドの場合、この値はコンポーネントのステートと常に一致する必要があります。 |
onChangeText |
関数 | 最新の文字列を受け取ります。ハンドラーは、特に長いフォームやリストの場合、安価に保つようにしてください。 |
placeholder |
string | 値が空の場合に表示されるヒントテキスト。ただし、唯一のラベルとして頼るのは避けてください。 |
keyboardType |
string | 、、などのキーボードレイアウトを要求します。実際のレイアウトはプラットフォームによって異なります。 email-address, number-padboolean phone-pad入力されたテキストをマスクします。パスワードフィールドは、Android上でセレクションとリーブルタグの挙動がキーボードによって異なる場合に追加テストが必要です。 |
secureTextEntry |
string | ケースの挙動を制御します。メールアドレス、ユーザー名、コード、入力値を厳密に保存する必要があるものなど、 |
autoCapitalize |
for | __CAPGO_KEEP_0__ none __CAPGO_KEEP_1__ |
maxLength |
native層での入力長さを制限します。事実上のトリミングを行うのではなく、厳格な制限がある場合に推奨されます。 | strictな制限がある場合に推奨される事実上のトリミングを行うのではなく、native層での入力長さを制限します。 |
multiline |
boolean | 複数行の入力を有効にします。高さ、垂直位置、送信動作は、このオプションが有効になると変更されます。 |
onFocus |
function | フィールドがフォーカスを取得したときに発火します。タッチ状態、分析、またはスクロールビューのロジックに役立ちます。 |
onBlur |
function | フォーカスがフィールドから離れたときに発火します。延期検証をトリガーするのに適しています。 |
returnKeyType |
string | キーボードアクションのラベルを設定します。、、、などです。iOSとAndroidのサポートは完全に一致しません。 next, done__CAPGO_KEEP_0__ search__CAPGO_KEEP_0__ |
onSubmitEditing |
function | キーボードの送信アクションが押されたときに実行される。 |
placeholderTextColor |
string | プレースホルダーの色を設定します。プラットフォームのデフォルト値が異なるため、対比を手動で確認してください。 |
editable |
boolean | 入力しながらフィールドをレイアウトに保持する。Disabledスタイルは依然としてあなたの責任です。 |
いくつかのプロパティは、開発者が期待するように機能しない複数行の組み合わせを引き起こします。
keyboardTypeヒントは保証ではありません。数値キーボードは依然として、デバイスやロケールに応じて、句点やマイナス記号を許可したり、除外したりする可能性があります。maxLengthは、スライスするのではなく、安全な方法です。Post-processingは制御されたフィールドでカーソルジャンプを引き起こす可能性があります。onChangeTextレイアウト以外の変更を行います。Androidでは、テキストはレイアウトを追加した後、上部の対齐のみに設定されることがよくあります。multiline制御された最小限の例textAlignVertical="top".
__CAPGO_KEEP_0__
基本パターンを覚えておく価値があるパターンです:
import React, { useState } from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
export function EmailField() {
const [email, setEmail] = useState('');
return (
<View style={styles.container}>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="Email address"
keyboardType="email-address"
autoCapitalize="none"
style={styles.input}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
borderWidth: 1,
borderColor: '#D0D5DD',
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 10,
},
});これは機能しますが、生産環境ではcodeは通常、数値の防御的なデフォルトを追加します。メールのようなフィールドの場合、 autoCorrect={false} キーボードの修正を意図しない値の変更に利用しないようにします。複数の入力フィールドを持つフォームの場合、 returnKeyType="next" リファーを付けて早期にフォーカスを設定すると、後でフォーカス管理のクリーンアップを実行する必要がなくなります。値を入力する際に値をフォーマットする場合、実装する前にカーソル動作をテストしてください。制御されたフォーマットは、物理デバイスで表示されるバグの迅速な導入方法の 1 つです。
フィールドが検証、送信の準備、サーバーへの水増し、または条件付き UI に参加する場合、最初から制御されたフィールドを維持してください。制御されていないフィールドに制御を後から追加すると、通常、フォーカス喪失と状態の不一致のバグが始まります。
基本的なテキスト入力パターンと例
多くのバグは、さまざまな用途に適合する一般的な入力実装を拡張しようとしていることから生じます。メール、パスワード、コメント、フォーマットされた値は同じデフォルトを必要としません。各パターンに必要なプロパティを与えましょう。
クレデンシャルのようなものの入力
import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';
export function UsernameInput() {
const [username, setUsername] = useState('');
return (
<TextInput
value={username}
onChangeText={setUsername}
placeholder="Username or email"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
style={styles.input}
returnKeyType="next"
/>
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#CCC',
borderRadius: 10,
paddingHorizontal: 12,
paddingVertical: 10,
},
});キーボードはユーザーに助けますが、値を意図しないように変更しないようにします。 autoCapitalize="none" ユーザー名とメールアドレスの場合も、より安全なデフォルトです。 autoCorrect={false} パスワード入力
パスワード入力は、パスワード入力と同じです。
import React, { useState } from 'react';
import { TextInput, View, Pressable, Text, StyleSheet } from 'react-native';
export function PasswordInput() {
const [password, setPassword] = useState('');
const [hidden, setHidden] = useState(true);
return (
<View style={styles.wrapper}>
<TextInput
value={password}
onChangeText={setPassword}
placeholder="Password"
secureTextEntry={hidden}
autoCapitalize="none"
autoCorrect={false}
style={styles.input}
returnKeyType="done"
/>
<Pressable onPress={() => setHidden(prev => !prev)} style={styles.toggle}>
<Text>{hidden ? 'Show' : 'Hide'}</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
position: 'relative',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#CCC',
borderRadius: 10,
paddingHorizontal: 12,
paddingVertical: 10,
paddingRight: 60,
},
toggle: {
position: 'absolute',
right: 12,
},
});The main trade-off here is convenience versus accidental exposure. Show/hide toggles improve entry accuracy, but teams should be deliberate about where they enable them.
複数行のノートまたはコメント
import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';
export function NotesInput() {
const [notes, setNotes] = useState('');
return (
<TextInput
value={notes}
onChangeText={setNotes}
placeholder="Add notes"
multiline
textAlignVertical="top"
style={styles.textarea}
/>
);
}
const styles = StyleSheet.create({
textarea: {
borderWidth: 1,
borderColor: '#CCC',
borderRadius: 10,
paddingHorizontal: 12,
paddingVertical: 12,
minHeight: 120,
},
});textAlignVertical="top" Androidでフィールドが適切なテキストエリアのようで感じるようにしたい場合は、重要
フォーマットされた入力とマスク
電話番号、カード入力、郵便番号、またはIDの場合、native TextInput コンテナとイベントフローを提供しますが、フォーマットロジックは提供しません。通常、チームは小さなフォーマッターを書くか、またはマスクライブラリを採用することになります。 onChangeText 簡単なルールがあります。フォーマットが軽量でローカルであれば、自分で実装してください。入力がロケール固有のルール、カーソル管理の懸念、または複数のマスクバリアントを持つ場合は、専用のライブラリを使用してください。
考慮すべきガードレールがあります。
レンダリングせずにステートでフォーマットすること。
- 表示される値が決定論的であることを保証する。 カーソルを軽々と戦うのではなく、
- __CAPGO_KEEP_0__ 入力が破綻しているように感じる最速の方法の1つはカーソルジャンプです。
- フォーマットとは独立して検証すること: 文字列は正しく見えながらもビジネスルールで失敗する可能性があります。
入力コンポーネントは、ユーザーが入力した内容、表示する内容、サーバーが期待する内容の3つの懸念を分離することで、最も綺麗な入力になります。
コントロールされたコンポーネントと非コントロールされたコンポーネントの深い理解
フォームは通常、単純に始まります。次に、製品はインライン検証、プリフィルドエディット、入力が有効になるまでの無効化された送信ボタン、放棄されたステップの分析などを要求します。コントロールされた入力と非コントロールされた入力の選択は、要求された機能がどれだけ痛みを与えるかを決定します。
コントロールされた入力はデフォルトです
コントロールされた TextInput Reactの状態にその値を保持します。 value、その状態を onChangeTextに渡し、更新します。
const [email, setEmail] = useState('');
<TextInput
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
/>このパターンも、実際のトレードオフを公開します。各キーストロークは、Reactの更新を引き起こします。小さなフォームでは、そのコストは微妙です。高価な兄弟レンダリングを持つ大きな画面では、低エンドのAndroidデバイスでは、可視的なタイプ入力遅延を引き起こす可能性があります。制御されたフィールドが遅いと感じる場合、問題は通常、その周りのコンポーネントツリーではなく、自身です。 TextInput 重い子供をメモ化し、可能な限りフォームの状態をローカルに保ち、直接nativeビュー内にパーシング、API呼び出し、またはスキーマ検証を避けることができます。 onChangeText.
制御された入力も、状態の変更が明確であるため、テストが容易です。テストはテキストを入力し、レンダリングされた値を確認し、送信をトリガーし、エラーメッセージを検証できます。nativeビュー内に何が含まれているかを推測する必要がなくなるため、フォームの動作のためのより良いカバレッジを求めるチームは、 ユニットテストのReactフォームの動作 コンポーネント設計の一部として扱うのではなく、後から追加するのではなく。
uncontrolled入力がまだ意味をなす場合
uncontrolled入力は、現在のテキストをnativeコンポーネント内に残し、refまたは送信時に出力します。そうした狭いツールですが、有効な用途があります。
捨てて検索フィールド:
- 画面は最終的なクエリまたはデバウンスアップデートにのみ気を配ります。 パフォーマンスの圧力下にある非常に大きなフォーム:
- ユーザーが最後に送信する場合、フォーム内のすべてのフィールドをReactの状態に保つことは、無駄に費やされる可能性があります。 抛物検索フィールド:
- 第三者またはブリッジされたネイティブ入力: あるいは制御されたプロパティより、イミュータスな方法を露出させるラッパーが存在する。
value要件が増加すると、ライブ検証は不快になる。フォームを送信した後、フォームをクリアすることは予測できない。サーバーからのレスポンスをフィールドに反映することは、リフレッシュと一時的な効果に変化する。
チームが実際に発生するバグ
公式の例では、制御された入力を簡単に表現しているように見えるが、実際には生産環境ではいくつかのエッジケースが頻繁に発生する。
フォーマット後、カーソルがジャンプする。
「If」は、入力に毎回文字列を書き換えると、カーソルは最後の方へ移動したり、予期せぬ動きをする。電話番号のマスクやクレジットカードのフォーマットは、通常の原因となる。
Android上で重いレンダリング中に文字が消える。 onChangeText 制御されたフィールドにタイプすると、親の再レンダリング、ネットワーク呼び出し、または同期検証が発生し、フィールドがキーストロークが欠けているように見えるが、実際の問題はレンダリングの圧力である。
制御されたモードと非制御モードの切り替え __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
If a field sometimes renders with __CAPGO_KEEP_0__ and sometimes without it, behavior gets inconsistent fast. Pick one ownership model for the lifetime of the component. If the field is controlled, initialize with __CAPGO_KEEP_1__ instead of __CAPGO_KEEP_2__ or __CAPGO_KEEP_3__ unless the component explicitly expects those values. value Prefill races. '' A common bug appears when async data arrives after the user has already started typing. The late server value overwrites the local edit. Guard the hydration path. Only apply fetched data if the user has not touched the field yet, or track dirty state per field. undefined A practical rule null Use controlled inputs for anything tied to __CAPGO_KEEP_4__, __CAPGO_KEEP_5__, __CAPGO_KEEP_6__, or __CAPGO_KEEP_7__. Use uncontrolled inputs only when the app does not care about intermediate values and the simpler ownership model buys you something measurable.
That standard avoids a lot of rewrites later.
Mastering __CAPGO_KEEP_8__ and __CAPGO_KEEP_9__ Handling
A form can be functionally correct and still feel clumsy if __CAPGO_KEEP_8__ behavior is off. Users notice this immediately. If the __CAPGO_KEEP_8__ hides the active field or “Next” doesn’t move where they expect, the whole screen feels unfinished.
If a field sometimes renders with and sometimes without it, behavior gets inconsistent fast. Pick one ownership model for the lifetime of the component. If the field is controlled, initialize with instead of or unless the component explicitly expects those values.
Prefill races.
A common bug appears when async data arrives after the user has already started typing. The late server value overwrites the local edit. Guard the hydration path. Only apply fetched data if the user has not touched the field yet, or track dirty state per field.
A practical rule Use controlled inputs for anything tied to , , , or . Use uncontrolled inputs only when the app does not care about intermediate values and the simpler ownership model buys you something measurable. That standard avoids a lot of rewrites later. Mastering and Handling A form can be functionally correct and still feel clumsy if behavior is off. Users notice this immediately. If the hides the active field or “Next” doesn’t move where they expect, the whole screen feels unfinished.
キーボードがレイアウトと戦わないようにしてください。
最初の修正は構造的なものです。画面に下部にフィールドが含まれている場合、 KeyboardAvoidingView またはキーボード認識のスクロールコンテナに該当する領域を包みます。
キーボードがアクティブな入力を隠さないようにしてください。
import React from 'react';
import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
export function FormScreen({ children }) {
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<ScrollView keyboardShouldPersistTaps="handled">
{children}
</ScrollView>
</KeyboardAvoidingView>
);
}実用的基準は次のようになります。
フィールドが複数ある場合、フォーカスを移動する際にスペースを調整する必要があります。ヘッダー、タブバー、または固定フッターが含まれる場合に特にそうです。
1つのラッパーですべてのレイアウトを解決することはできません。 returnKeyType 意図的にフォーカスを移動する onSubmitEditing リファレンスに基づくフォーカス管理が、複数フィールドのフォームを滑らかに感じさせるものです。
import React, { useRef, useState } from 'react';
import { TextInput, View } from 'react-native';
export function SignupFields() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const passwordRef = useRef<TextInput>(null);
return (
<View>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="Email"
keyboardType="email-address"
autoCapitalize="none"
returnKeyType="next"
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
value={password}
onChangeText={setPassword}
placeholder="Password"
secureTextEntry
returnKeyType="done"
/>
</View>
);
}ステップに合わせて onFocus 次のリファレンスにフォーカスを当ててください。 onBlur ユーザーに役立つようになります。多くのチームはフォーカス時にボーダーカラーを変更し、ブルーまでエラーを表示せず、最後のフィールドが送信された後キーボードを閉じます。
視覚的なウォークスルーは、チームが行動標準に合致するようにするのに役立ちます。
実践からの最終的なメモ。キーボードの閉じ方はフォーカス移動よりも面倒なことが多いです。タップ外部のフィールドは単純に思えるかもしれませんが、スクロールビューとボタンのインタラクションは混乱することがあります。実際のスクリーンではなく、孤立したストーリーブックスタイルの例ではありません。閉じる動作をテストしてください。
スタイリング、アクセシビリティ、プラットフォームの差異
チームは通常、スタイリング、アクセシビリティ、プラットフォームの差異について別々に議論します。実際のアプリでは、つながっています。iOSで悪く切断され、スクリーンリーダーから目的を隠すフィールドは完成していません。
長く使えるスタイル
使用 StyleSheet.create() 入力スタイルを長く使う予定のものについては、標準化することがチームに役立ちます。ボーダー、パディング、ラジウス、プレースホルダー色、無効状態、エラーのバリアントを一か所にまとめます。インラインスタイルは実験用に問題ありませんが、設計システムが進化するとすぐに古くなります。
長く使える入力スタイルには通常含まれるもの
- 一貫したタップエリア パディングはフィールドをタップしやすくする必要があります。
- 可視的なフォーカスとエラーの状態 ユーザーは、フィールドが有効または無効のときに明確なクイューが必要です。
- 予測可能なスペース: ラベル、ヘルプテキスト、エラーはレイアウトにスペースが必要です。
入力の表面処理と視覚的階層を微調整している場合、この React Native の線形グラデーション ガイド は、コンテナ スタイリング パターンに役立つデザイン近傍の参照です。
アクセシビリティと iOS の特定の動作
クロスプラットフォームの統一のために、開発者は iOS のレンダリングの奇妙さを考慮する必要があります。 lineBreakStrategyIOSこれを push-out に設定すると、入力が文字列の末尾に省略記号を表示し、Android のデフォルトの動作と一致します。これについては、 この Stack Overflow のスレッドで React Native のテキスト表示動作について議論されています。.
同じ参照では、入力エリアを囲むことで KeyboardAvoidingView __CAPGO_KEEP_0__ KeyboardAwareScrollView キーボードがフィールドを隠すリスクがある場合、__CAPGO_KEEP_0__ は必須です。 bottomOffset 例えば 30 画面サイズが異なる場合にスペースを調整するのに役立ちます。 StyleSheet.create() また、成熟したチームは、メンテナンス性とアクセシビリティのために、以下の2つの標準をデフォルトとして扱うべきです。
__CAPGO_KEEP_0__ を使用してメンテナンス性を向上させ、明確なラベル、ヘルプテキスト、エラーメッセージを提供してアクセシビリティを向上させます。
- レビューの際に使用する実践的なチェックリストです。 フィールドを明確にラベル付けすること:
- プレースホルダーテキストはラベルを完全に置き換えるものではありません。 ヘルプとエラーテキストを明確に表示すること:
- ユーザーは何が失敗したのかを推測する必要がないようにします。 iOSで長い値をテストすること:
- 向きの変更を検出する: レスポンシブなフォームレイアウトは、微妙に壊れることがあります。
良いモバイル入力は、ユーザーに何が入るべきか、何が間違っているか、そして何が次に起こるかを伝える必要があります。
一般的なバグと高度な修正
最も時間を浪費するのは、このことです。フラストレーションの部分は、バグが存在することではなく、多くの最悪のものが、見た目上は正しいパターンで発生することです。
制御されたクリアリングのバグ
制御された入力クリアリングのバグは、最も醜い問題の1つです。状態を空の文字列に設定し、フィールドをクリアすることを期待し、入力がフォーカスを維持している間も、表示されているテキストが残ります。
この問題に関するコミュニティの議論は、標準的な方法である clear() 、または単純な状態の更新が、ネイティブのイベントカウンタをバイパスし、レンダリングの不一致を引き起こすことが示されています。同様の議論では、この問題を解決するには、 key プロパティラッパーを強制する、またはカスタム forceSetTextAndSelection コマンドを使用する、ということが提案されています。これは公式のAPIの機能ではありません。また、2024年から2025年のフォーラムの議論では、この問題は未解決のままです。 iOS Stack Overflow のスレッドと Reddit の投稿で問題を挙げている React Native のコントロール入力クリアに関するコミュニティディスカッション.
最小限のワークアラウンドは次のようになります。
import React, { useState } from 'react';
import { TextInput, View, Button } from 'react-native';
export function ClearableField() {
const [value, setValue] = useState('');
const [inputKey, setInputKey] = useState(0);
const clearField = () => {
setValue('');
setInputKey(prev => prev + 1);
};
return (
<View>
<TextInput
key={inputKey}
value={value}
onChangeText={setValue}
placeholder="Type something"
/>
<Button title="Clear" onPress={clearField} />
</View>
);
}これは美観ではありませんが、信頼性はあります。
iOS のテキスト消失問題
iOS の表示不具合の別のカテゴリは、テキストが入力中に停止して表示されない、または長い値や特定のスタイルの組み合わせの場合にテキストが消失することです。
通常、修正はデバッグのパスよりも簡単です。
- 追加
flex: 1レイアウトが必要な場所に追加 flex 制約が欠けているとレンダリングが破綻する - 検証
selection__CAPGO_KEEP_0__に注意してください: 不正な使用は視覚的な問題を引き起こす可能性があります。 - メモ化を戦略的に使用してください: 親要素のレンダリングを安定させることで、glitchの表面積を削減できます。
- __CAPGO_KEEP_0__を使用するには、フィールドの動作に一致する必要があります:
multiline={true}パッチとして機能する可能性がありますが、盲目的に追加してはいけません。 プロダクションデバッグでこれらの問題を早期にキャッチしたい場合は、__CAPGO_KEEP_0__とReact NativeのガイドはUIのバグのフィードバックループを強化するのに役立ちます。
入力が多く再レンダリングされる場合のパフォーマンス 入力に関するパフォーマンスアドバイスはしばしば教義となります。実際はそれほど単純ではありません。すべてのフィールドを事前に最適化する必要はありません。入力状態が高価な兄弟要素のレンダリング、フォーマット作業、または繰り返し検証ロジックを引き起こすスクリーンを最適化する必要があります。 __CAPGO_KEEP_1__
__CAPGO_KEEP_2__
__CAPGO_KEEP_3__
有効な戦略には、フィールドごとに状態を近づける、親画面が雑音を発生する場合にフィールドラッパーをメモ化する、または高価な検証または検索ドライブされたサイドエフェクトをデバウンスすることなどが含まれます。 しかし、すべての状態をグローバルに早すぎると、入力自体を非難する前に、入力が遅いと感じるのはなぜかを調べる必要があります。
入力が遅いと感じたら、入力自体を非難する前に、入力ごとに再レンダリングされる他のものを調べる必要があります。
統合とより広いエコシステム
TextInputはほとんどの場合、単独で存在しません。 生成されたアプリでは、フォームライブラリ、分析用のハック、検証レイヤー、API クライアント、デザインシステムの中にあります。 そのエコシステムは重要です。 最も良い入力実装は、チームが一貫性を保つことができるものです。
フォームライブラリとTextInputを使用する
FormikとReact Hook Formは両方ともnative TextInputとよく動作しますが、チームは異なる習慣に誘導されます。 Formikは、チームが制御された状態パターンを好む場合に明示的で馴染みのある感覚です。 React Hook Formは、フォームが大きくなると再レンダリングオーバーヘッドを避けることができ、ボイラープレートを削減できます。
ライブ検証の場合、信号を有効に保つことが重要です。 入力中に高速かつローカルに検証し、blurまたはsubmitのときに重いチェックを予約してください。 メール、ユーザー名、IDなどのパターンをレビューするチームでは、正規表現ベースのルールは一般的です。 そのパターンをレビューするチームでは、 Digital ToolPadの正規表現ガイド は、実装する前に式をテストするための実用的なリソースです。
native TextInputが十分であれば十分です
Nativeのテキスト入力フィールドは、チームがラベル、ヘルプテキスト、エラー状態、フォーカススタイルを持つ小さなラッパーコンポーネントを所有する場合、多くのアプリケーションでは十分です。
第三者コンポーネントライブラリは、多くの画面にわたる一貫したテーマとプリビルドフォームプリミティブを必要とする場合に意味があります。代償は抽象化です。速度を得ますが、エッジケースをデバッグする際にライブラリ固有の動作も継承します。
iOSに関連する重要な注意事項があります。ラッパー設計決定に影響を与えるからです。iOSのテキストの可視性の脱落も、特に長い値や特定のスタイリングの場合に、入力されたテキストが打鍵後に消える問題です。 このStack Overflowのスレッド「TextInputが入力されたテキストを表示しない」 は、入力されたテキストが表示されない原因として、 flex: 1 と selection のプロパティの使用が不足しているか誤っていることが指摘されています。 useMemo は、入力フィールドをラッパーで囲むか、 multiline={true}を設定するなどのコミュニティの修正が含まれます。
は便利なパッチですが、デフォルトのアーキテクチャにはなりません。 comparison of React Native and Capacitor React Nativeと__CAPGO_KEEP_0__の比較は、有用な枠組みを提供します。
The practical takeaway is simple. Start with native TextInput plus a disciplined wrapper. Move to a library when your design system and delivery speed justify the extra abstraction.
If your team ships mobile apps with web-based stacks and needs a safer way to push JavaScript, CSS, copy, config, and asset fixes without waiting on store review、 Capgo is worth a look. It gives teams controlled live updates, rollout channels, rollback protection, and release visibility, which is especially valuable when UI issues in forms or input flows need fast correction.
