web-dev-qa-db-ja.com

キーボードが開いているときにビューをスクロールする（React Native / Expo）

ExpoアプリでKeyboardAvoidingViewを使用するのに苦労しています。次の要件を満たしたい：

  • キーボードが開いたら、ビューを上にスクロールして、ユーザーが常に入力を見るようにします。それがKeyboardAvoidingViewの目的です。
  • ユーザーは、キーボードが開いているときに全体ビューをスクロールできる必要があります。
  • 奇妙なグラフィックの不具合はありません。
  • IOSとAndroidで動作するはずです。

100種類のソリューションを試しましたが、満足のいく結果が得られませんでした。 Expoを使用しているため、AndroidManifestに変更を加える必要があるため、 https://github.com/APSL/react-native-keyboard-aware-scroll-view を使用できませんでした。

KeyboardAvoidingViewを使用して、最善の解決策は、iOSでbehavior = "padding"を設定し、Androidでまったく動作しないことであることがわかりました。ただし、依然として問題があります。キーボードが開いていると、ユーザーがスクロールできるスペースが制限されます。したがって、ビューが多数の入力を含む長いフォームである場合、ユーザーはキーボードを閉じてスクロールし、再度キーボードを開かないと、フォームの下部に移動できません。

フォーカスされた入力の直後にキーボードが開くという問題もありますが、入力にパディングがあるため、余分なスペースを残したいと思います。 keyboardVerticalOffsetプロパティを使用しても、これには影響しません。

トピックに関する数十の投稿を読んだ後、KeyboardAvoidingViewsがどのように機能し、それらを効果的に使用する方法を実際に理解している人はいません。公式のReactネイティブドキュメントでも、「AndroidとiOSはどちらもこのプロップと相互作用します[（behavior）]とは異なります。Android彼らはこのプロパティが何であるかを実際に理解していないように、まったく振る舞いの小道具が与えられていないとき、iOSは反対です」.

4つの要件を満たすために、KeyboardAvoidingViewの使用方法と使用方法を理解している人はいますか？

react-nativekeyboardexpo
18
Arnaud

これを使っています

<KeyboardAwareScrollView  keyboardShouldPersistTaps={'always'}
        style={{flex:1}}
        showsVerticalScrollIndicator={false}>
    {/* Your code goes here*/}
</KeyboardAwareScrollView>

そして私たちは4つの問題のどれにも直面していませんでした

6
Kranthi

react-native-keyboard-spacer からKeyboardSpacerを試しましたか？私はそれをreact-native-elementsで使用し、それは完璧に動作します！注意する必要があるのは、スクロールビューを使用する場合だけです。ちょうどあなたがその外に置くことを確認してください！

2
Gaspar Teixeira

私は同様の問題を抱えていました。キーボードが表示されていると、スクロールが正しく機能しませんでした。私は次の解決策を使用してこの問題を解決しました：App.jsonにこれを追加しました：

"androidStatusBar": {
  "backgroundColor": "#172a53"
}

これにより、ステータスバーが画面上部に固定されます。そして、キーボードが表示されたときに魔法のようにスクロールが適切に機能し始めます（理由はわかりません）。そして、StatusBarを元々機能していたように機能させるために、これをApp.js（ルートファイル）ファイルに追加しました

<StatusBar translucent />

これで問題が解決することを願っています。ありがとう

0
Hamza Sajid

KeyboardAvoidingViewの問題を理解できません

それは私にとっては仕事です：

<KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
  your ui ....
</KeyboardAvoidingView>
0
Idan