结合点击关闭键盘、键盘避免视图和提交按钮

Posted 2023-03-13

【中文标题】结合点击关闭键盘、键盘避免视图和提交按钮

【英文标题】：Combining tap to dismiss keyboard, keyboard avoiding view, and submit button

【发布时间】：2018-07-24 09:51:09

【问题描述】：

我有一个屏幕，上面有一个带有文本输入的大图像，底部有一个按钮。这个屏幕基本上有三个要求：

当用户点击输入时，输入和按钮应该在键盘上方可见 用户应该能够点击按钮提交文本输入 如果用户点击输入之外的任何位置（包括按钮），则应关闭键盘。

我尝试了各种解决方案，包括使用react-native-keyboard-aware-scroll-view，但没有一个能正常工作。这个特殊的图书馆似乎吃水龙头，所以你不能按按钮提交。否则就好了。

我能做到的最接近的方法是用<TouchableWithoutFeedback onPress=Keyboard.dismiss> 包围各种屏幕元素。当我尝试将整个屏幕内容包装在<TouchableWithoutFeedback> 中时，<KeyboardAvoidingView> 停止工作。

<KeyboardAvoidingView behavior="padding">
  <TouchableWithoutFeedback onPress=Keyboard.dismiss>
    <Image source=require('./img.png') />
  </TouchableWithoutFeedback>
  <TouchableWithoutFeedback onPress=Keyboard.dismiss>
    <View>
      error
      <Text>Search</Text>
      <TextInput
        value=this.state.search
        onChange=this.handleChange
      />
      <TouchableHighlight onPress=this.handleSubmit>
        <Text>SEARCH</Text>
      </TouchableHighlight>
    </View>
  </TouchableWithoutFeedback>
</KeyboardAvoidingView>

这是最接近可行的解决方案，但仍然存在一些问题。首先，似乎没有办法为KeyboardAvoidingView 添加任何额外的高度，因此在某些情况下，该按钮不会显示在键盘上方。其次，在某些情况下，如果屏幕太高，按钮下方的区域不会在点击时关闭键盘，因为没有地方可以放置 <TouchableWithoutFeedback> 来隐藏它。

有没有更好的方法在键盘启动时向用户显示内容，同时允许他们点击以关闭键盘并仍然与某些控件进行交互？

【问题讨论】：

我无法回答您问题的所有部分，但是，TextInput 有一个 onBlur 事件可以用来关闭键盘。

@ajthyng 在别处点击不会触发onBlur

您找到解决方案了吗？

你可以尝试使用KeyboardAwareScrollView

【参考方案1】：

我可以通过添加来解决这个问题

<KeyboardAwareScrollView 
     ref="scroller"
    keyboardShouldPersistTaps=true 
    >