当在滚动视图中时，React Native需要轻按两次才能更改输入焦点 [英] React Native requires two taps to change input focus when within scrollview

问题描述

想象一下带有多个TextInputs的简单ScrollView

Imagine simple ScrollView with multiple TextInputs like

  <ScrollView style={styles.container}>
    <TextInput style={styles.input} />
    <TextInput style={styles.input} />
  </ScrollView>

当我输入第一个输入时，键盘会打开，并且我可以输入文本.当我想更改为第二个输入时，我需要点按两次-第一个类型会关闭键盘，只有第二个点击会打开键盘进行第二个输入.

When I enter first input, keyboard opens and I can type text. When I want to change to second input I need to twice tap - first type closes keyboard and only second tap opens the keyboard for second input.

一种解决方案是使用keyboardShouldPersistTaps={true}-切换效果很好，但是根本没有关闭键盘，键盘可以覆盖一些以后的输入(或按钮). 我也可以使用keyboardDismissMode，但是在拖动时只需关闭键盘即可.

One solution is to use keyboardShouldPersistTaps={true} - switching works fine however then keyboard is not closed at all and the keyboard can cover some of the later inputs (or buttons). I can also use keyboardDismissMode however that just close keyboard on drag.

我的问题是如何将这两种行为结合在一起-恕我直言，这是最佳的用户体验-当我单击另一个输入时，无需重新打开键盘即可立即更改焦点，而当我敲击其他地方的键盘时又会关闭?

My question is how to combine those two behaviour - into IMHO the best user experience - when I click another input, the focus is changed immediately without reopening keyboard and when I tap somewhere else the keyboard is closed?

我正在使用RN0.22，可以在 https://rnplay.org/apps/kagpGw中获得示例应用程序

I am using RN0.22 and sample application is available at https://rnplay.org/apps/kagpGw

更新-此问题可能已在RN 0.40中解决-请参见

UPDATE - This problem might have been solved in RN 0.40 - see https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4

推荐答案

我用这段代码解决了我的问题

I solved my problem with this code

<ScrollView
   keyboardDismissMode='on-drag'
   keyboardShouldPersistTaps={true}
>

这篇关于当在滚动视图中时，React Native需要轻按两次才能更改输入焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！