ランダムに再発するキーボードの問題を修正した後の感想 (ReactNative)

この記事は、ランダムに発生するキーボードの問題を修正した後の感想を紹介します。興味のある方はぜひご覧ください。

私は最近、モバイル端末のバグを修正するのに 1 週​​間近くを費やしました。非常に大きな問題です。おそらく次のような問題です。比較的長い話ですが、興味があれば読み続けてください。

これはどのようなバグですか

タブレットアプリケーションを長時間使用すると、バグが現れます まず、入力ボックスに内容を入力した後、[完了/検索]をクリックします。次に、ページ上の空白領域をクリックすると、ソフトキーボードがポップアップし、が最近入力された入力ボックスにカーソルのフォーカスが置かれます。 現時点では、ユーザーの行動に対するアプリケーションの反応は、ユーザーを混乱させ混乱させます。

要約すると、次のような特徴があります

アプリケーションは最初は正常ですが、毎回再現することはできません
このバグが発生すると、この問題は入力ボックスのあるすべてのページに存在します
繰り返し発生するシーンは不明ですが、アプリケーションを長時間使用すると、アプリケーションが終了するかバックグラウンドで再起動されると、再び表示される可能性が高くなります。
このバグを修正する方法

最初のステップは、再度安定化を試みることです

私たちは最初に、このバグを再現するための最小限のユーザージャーニーを見つけようとしました、その時は幸運で、見つけるのに約半日を費やしました。最小のユーザー ジャーニーを再現します。

ビジネスの背景については話さずに、アプリケーションのページ ロジックを簡単に紹介しましょう。

私たちのアプリケーションにはログイン後にホームページがあります。ホームページにはスライドまたはクリックして切り替えることができる3つのタブがあり、タブページには機能メニューの1つをクリックしてジャンプできます。入力ボックスのあるページに移動します。

このページはおおよそ次のとおりです。プロの UX でない場合は、見苦しくても怒らないでください。


私たちが見つけたすぐに再現できるパスは次のとおりです

ログインしてホームページに到達したら、3つのタブを複数回（20回以上）繰り返し切り替えます
メニューAをクリックして、入力ボックス ページ上で
入力ボックスにデータを入力し、ソフトキーボードで完了をクリックします
ページの空白領域をクリックすると
ソフトキーボードが出てきます。

2 番目のステップは、最小シナリオで問題が発生する理由をコード部分から見つけ出すことです

最小再現パスを見つけた後、コードから問題が発生する理由を見つけることができます。

このバグはアプリケーションを再起動しても消えないため、私たちの疑惑はレンダリングの問題に向けられており、おそらくコンポーネントが原因であると考えられます。

私たちの間にはいくつかの推測があります

自分たちでカプセル化した入力コンポーネントに問題があります
3つのタブのスライドコンポーネントに問題があります。スライドコンポーネントのスクロールビューがジェスチャに影響します。 RN
の反応システム ようやく判明しました この時、私はグループの別の同僚とペアになっていましたが、人数が多いと問題が起こりやすいことがわかりました。彼女はまた、ネットワークのリクエスト処理が原因ではないかとも考えました。この疑惑は実際には完全に正しいわけではありませんが、私たちにとって解決策を見つけてくれます。

最終的に、すべてのネットワーク リクエストには、リクエスト結果が返される前に、ページ上にマスクのレイヤーと Web のスピナー (RN では ActiveIndicator) に似た読み込みプロンプト シンボルがあることがわかりました。この部分はページのレンダリングに影響します。 。

この部分が削除されると (リクエストが到着する前にマスキング レイヤーが表示されなくなります)、このバグは解消されます。理由の一部は見つかったようですが、まだ解明されていないため、この発見は当時まだ衝撃的で混乱をもたらしました。理由がわかりません。

3番目のステップは、（根本原因を明らかにせずに）修復を試みることです

この考えを念頭に置いて、修復を試みます。ユーザーに適切なプロンプトを提供することが本当に必要であるため、ビジネス ニーズに応じて、ActivityIndi​​cator の使用をキャンセルすることはできません。

古いマスクの実装では、ロード プロンプト シンボルを表示するためにルート レベルに兄弟要素を挿入するために、サードパーティの RN コンポーネント、react-native-root-siblings を使用しました。

通常、リクエストの送信後、リクエストの結果が到着する前に、新しい兄弟要素を挿入し、リクエストの完了後に削除します。当時、この部分がページの要素構造の変更を繰り返していたため、new-destroyロジックがnew-updateロジックに置き換えられ、要素の変更が減少したのではないかと疑われていました。アップデートする際、ActivityIndi​​catorが表示されないようにするだけで非表示になるようです。

ステップ 4: バグが再現できるかどうかをテストします

ページ要素の削除と作成の繰り返しを減らすことで、このバグを修正したいと考えています。
それはとても不思議で再現するのが難しいのですが、理由はまだわかりません。
その後、QA は実際のデバイスで何度かこの問題が発生したと言いました。これでさらに困惑しましたが、実際に発生する可能性は低くなっているのに、なぜ依然として発生するのでしょうか。

ステップ 5: バグの根本原因を分析する

現時点では、バグの本当の原因を理解する必要があります。
このバグのパフォーマンスに戻りましょう。なぜ空白領域をクリックすると TextInput の focus メソッドがトリガーされるのでしょうか?このようなことをいくつか試してみました。

• TextInput のフォーカスがトリガーされる場所を確認します

コード ロジック内の少量のバインディング ref に加えて、.focus メソッドをトリガーします (少量しか発生しないため、バグを満たしておらず、バグが発生するとすべての入力がブロックされます) 影響を受けるシナリオ、迅速な排除は理由の一部ではありません)、RN が提供する TextInput コンポーネント内にもフォーカス メソッドが呼び出される場所が多数あることがわかりました。

以上がランダムに再発するキーボードの問題を修正した後の感想 (ReactNative)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。