Question

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

当用户点击输入时，键盘上方应显示输入和按钮
用户应该可以点按按钮提交文字输入
如果用户点击输入外的任何地方（包括按钮），键盘应该被解除。

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

结合点击以关闭键盘，键盘避开视图，并提交按钮

1 个答案: