2016-05-27 20 views
1

TextInputボックスにフォーカスし、TextInputボックスがキーボードの後ろに隠れないようにキーボードが表示されているとき、自動的に表示をスクロールできますか? この質問はStackOverflowで何度か聞かれましたが、ほとんどの回答でアドバイスされている一般的な解決策であるhereというソリューションを実装しました。このソリューションはiPhoneシミュレータで正常に動作しますが、実際の電話機では機能しません。他の誰かがこの問題を経験していますが、ソリューションは実際の電話では機能しませんか?キーボードが反応ネイティブで表示されているときに自動的に表示をスクロールします

このソリューションを追加した後に気付いた点は、TextInputボックスにフォーカスしてキーボードが表示されている場合、ボタンを押すか、別のTextInputボックスにフォーカスしようとすると、キーボードを隠すためにボタンが押されていないか、他のTextInputボックスがフォーカスされていません。ユーザーが操作を2回行う必要があるのはちょっと面倒です。他の誰かがこの問題を観察しましたか?

これらの問題を解決する方法についてご意見がありましたら教えてください。

+0

これは私のためにうまくいっています:https://github.com/Andr3wHur5t/react-native-keyboard-spacer –

+1

@NaderDabit私が推奨した上記パッケージを試しましたが、うまくいかなかったのです。たとえば、画面の1つでは、DatePickerといくつかの入力ボックスがあり、入力ボックスを押したときにキーボードが表示され、ビューが上にスクロールされると、入力ボックスは上に移動しますが、DatePickerは移動しません入力ボックスをDatePickerにオーバーラップさせます。モバイルアプリで機能を実装している途中で、すぐに試してみることができただけで、上の動作を引き起こしているコードに問題がある可能性があります。私はそれにもう一度お試しいただき、再度コメントします。 –

答えて

3

this solutionとします。私は同じ問題に遭遇し、調整を加えました(see gist)。私はあなたが説明した両方の問題に対処しましたkeyboardShouldPersistTapsは2番目の問題を解決します。

実際のデバイスではなく、スペーシングがシミュレータで動作する正確な理由は見つかりませんでした。それはタイミングと関係があります。元のコードは入力フォーカスにタイムアウトを設定し、50ms後にスクロールしようとします。これをたとえば500msに増やすと、デバイス上でも動作しますが、私が理解していない魔法のタイムアウトを追加するのは本当に好きではありません。私はそれを変更したので、onFocus私はスクロールして参照を格納する要素を調べます。 onKeyboardDidShowが起動すると、私は参照を使用します。

+0

お返事ありがとうございます。私はあなたの解決策を試すことができなかった何かの真ん中にいる。できるだけ早く試してみて、私の経験を分かち合います。あなたのご親切に感謝します! –

+0

あなたのソリューションは完璧に動作しました。私はまた、他のソリューションのタイムアウトを500に増やしたときに、それが非常に良い洞察であった他の変更なしで動作することを確認しました。 –

関連する問題