React-Native でのキーボード オクルージョンの問題を解決するにはどうすればよいですか?

開発中に入力が必要な場面によく遭遇します。RN さんが教えてくれた TextInput は使いやすいですが、残念ながらオクルージョンの問題には対応していません。

キーボードがポップアップして編集ボックスがブロックされることが多く、頭痛の種になります。

私はもともと js.coach ライブラリでサードパーティのプラグインを探したかったのですが、私が見た中で最適なものは React-native-keyboard-spacer でした。しかし、まだ 1 つ足りないことがあります。それは、キーボードの高さ。

これも長い間チェックしましたが、見つかりませんでした。そのため、キーボードの高さを取得するために独自のネイティブ モジュールを作成する必要がありました。

ネイティブ iOS でのキーボードの高さの取得については多くは言いませんが、RN に基づいて作成したコードとネイティブ モジュールを直接貼り付けます。ブログでもそのように書かれていましたが、最初は RCT_REMAP_METHOD で高さを取得しようと考えましたが、残念ながら、最初にキーボードがポップアップしたときは、ポップアップ後の高さが 0 のままだったので、追加しました。 listen 関数 heightChanged の記録値と変更後の値が一致しない場合は、listening 関数を呼び出してその値を JS 側に渡します。このようにして、JS 側は変更を検出した後、対応する変更を加えることができます。

さて、ネイティブ モジュールはカプセル化されています。次に、これも古いトピックですが、コードを直接貼り付けてください。ここで高さに達しました。次のステップは簡単です。足し算と引き算の問題です。

画面上の入力ボックスの位置を取得し、それをキーボードの高さと比較する必要があります。onLayout を通じて入力ボックスの位置を取得します。コンポーネントとページを追加する必要はありません。先ほどと同様に、祖父コンポーネントを記録するためにグローバルを追加しました (主にページ全体を上に移動するため)。次のステップでは、

アニメーション
を追加します。あまり突然にしないでください。

りー

以上です。次にスクリーンショットを撮って効果を確認します。アニメーションはありますが、ダイナミックな写真は作成できません

以上がReact-Native でのキーボード オクルージョンの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。