React Native需要两次点击才能在scrollview中更改输入焦点

sod*_*dik 11 keyboard reactjs react-native

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

  <ScrollView style={styles.container}>
    <TextInput style={styles.input} />
    <TextInput style={styles.input} />
  </ScrollView>
Run Code Online (Sandbox Code Playgroud)

当我输入第一个输入时,键盘打开,我可以键入文本.当我想要更改为第二个输入时,我需要两次点击 - 首先键入关闭键盘,只有第二个点击打开键盘进行第二次输入.

一种解决方案是使用keyboardShouldPersistTaps={true}- 切换工作正常然后键盘根本不关闭,键盘可以覆盖一些后面的输入(或按钮).我也可以使用keyboardDismissMode,只需在拖动时关闭键盘.

我的问题是如何将这两种行为结合起来 - 进入恕我直言最好的用户体验 - 当我点击另一个输入时,焦点立即改变而不重新打开键盘,当我点击其他地方键盘关闭时?

我使用的是RN0.22,示例应用程序可在https://rnplay.org/apps/kagpGw上找到

更新 - 此问题可能已在RN 0.40中解决 - 请参阅https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4

Gus*_*lin 5

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

<ScrollView
   keyboardDismissMode='on-drag'
   keyboardShouldPersistTaps={true}
>
Run Code Online (Sandbox Code Playgroud)


Jos*_*hea 3

这个答案并不完全是您所要求的,但当 TextInput 具有焦点时,窗口会自动从键盘后面滑出;解决键盘问题可以解决以后的一些输入(或按钮)问题。