我有一个屏幕,上面有一个带有文本输入的大图像,底部有一个按钮。此屏幕基本上具有三个要求:
- 当用户点击输入时,输入和按钮应该在键盘上方可见
- 用户应该能够点击按钮提交文本输入
- 如果用户点击输入框以外的任何地方(包括按钮),键盘应该被关闭。
我尝试了各种解决方案,包括使用 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>
。隐藏它。
有没有更好的方法可以在键盘启动时向用户显示内容,同时允许他们点击以关闭键盘并仍然与某些控件进行交互?
最佳答案
好吧,我可以通过添加
来解决这个问题<KeyboardAwareScrollView
ref="scroller"
keyboardShouldPersistTaps={true}
>
关于reactjs - 组合点击以关闭键盘、键盘避免 View 和提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48776757/