组合点击以关闭键盘,键盘避免查看和提交按钮

Exp*_*lls 5 typescript reactjs react-native

我有一个屏幕很大的屏幕,底部有一个文本输入和一个按钮。该屏幕本质上具有三个要求:

  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>
Run Code Online (Sandbox Code Playgroud)

这是最接近有效解决方案的方法,但是仍然存在一些问题。首先,似乎没有办法为添加任何额外的高度KeyboardAvoidingView,因此在某些情况下,按钮不会显示在键盘上方。其次,在某些情况下,如果屏幕过高,则按钮下方的区域将不会消除轻按键盘,因为没有地方<TouchableWithoutFeedback>可以隐藏它。

有没有更好的方法可以在键盘弹起时向用户显示内容,同时允许他们点击以关闭键盘并仍然与某些控件交互?

Sur*_*ant -1

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

<KeyboardAwareScrollView 
     ref="scroller"
    keyboardShouldPersistTaps={true} 
    >
Run Code Online (Sandbox Code Playgroud)