在键盘识别滚动视图中的textInput之后按React-Native按钮 [英] React-Native button press after textInput in Keyboard aware scroll view

问题描述

我遇到一个问题，我在 KeyboardAwareScrollView 中有 TextInput 和按钮。我希望用户输入一些文字，然后按 TouchableOpacity 制作的按钮。这将向前发送用户刚刚输入的文本。

I have a problem where I have a TextInput and a button inside a KeyboardAwareScrollView. I want the user to input some text and then press the button made with TouchableOpacity. This sends the text forward that the user just inputted.

问题是在输入文本后，首先尝试 TextInput 仅失去焦点。只有在下一次按下尝试时才会实际按下按钮。如何在第一次按下时按钮有效？

Problem is that after inputting text, one first try TextInput merely loses focus. Only on the next press attempt is the button actually pressed. How can I have the button react on the first press?

我正在使用此包 https://github.com/APSL/react-native-keyboard-aware-scroll-view

我的代码如下：

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export default class App extends Component<{}> {
  render() {
    return (
      <KeyboardAwareScrollView>
        <TextInput
          style={{ width: 100, height: 50, backgroundColor: 'blue' }}
        />
        <TouchableOpacity 
          style={{ backgroundColor: 'red', width: 50, height: 50 }}
        />
      </KeyboardAwareScrollView>
    );
  }
}

推荐答案

请在ScrollView上使用 keyboardShouldPersistTaps ='always'。以下是如何操作。

Please use keyboardShouldPersistTaps='always' on ScrollView. Below is how to do it.

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

这是因为 ScrollView 有财产要解雇键盘首先然后它将允许对其子视图的操作。现在我们正在用上面的属性改变这种行为。

It's happening because ScrollView has property to dismiss the keyboard first and then it will allow actions to its child views. Now we are changing that behavior with above property.

这篇关于在键盘识别滚动视图中的textInput之后按React-Native按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！