reactjs - 组合点击以关闭键盘、键盘避免 View 和提交按钮

Question

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

1. 当用户点击输入时，输入和按钮应该在键盘上方可见
2. 用户应该能够点击按钮提交文本输入
3. 如果用户点击输入框以外的任何地方(包括按钮)，键盘应该被关闭。

我尝试了各种解决方案，包括使用 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>。隐藏它。

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

Answer 1

好吧，我可以通过添加

来解决这个问题

<KeyboardAwareScrollView 
     ref="scroller"
    keyboardShouldPersistTaps={true} 
    >