More than 5 years have passed since last update.

ReactNativeのScrollView+Keyboardで二回タップを防ぐ

Posted at 2018-09-28

この記事は、ReactNativeで以下の条件を満たしたい場合の対処法を書いています。

ScrollViewを使っている
ScrollViewの子要素に、 TextInutとButton(あるいはTouchableOpacity)が含まれている
TextInputに入力するためにソフトキーボードが立ち上がり、入力後に送信ボタンなどを押したいが、 ボタンを2回タップしないといけない (1回目のボタンタップでソフトキーボードが消え、2回目のボタンタップでボタンタップ時のアクションが実行される)

解決法はとても簡単で、ScrollViewの keyboardShouldPersistTaps
プロパティの値を "always" にするだけです。

<ScrollView keyboardShouldPersistTaps='always'>
//
</ScrollView>

これによって、最初にボタンタップした時にキーボードが隠れるのを防ぎ、そのままボタンタップのイベントを発火させることができます。

もちろん、KeyboardAwareScrollView などでも使用可能です。