AutoCompleteTextView在React Native中与iOS和Android兼容 [英] AutoCompleteTextView in react native compatible with both iOS and Android

问题描述

我需要在react native中实现AutoCompleteTextView.问题在于没有这样的内置组件.可以用来模仿此功能的所有模块和库并不完全相似.主要问题是建议没有出现在视图上方(例如选择框/选择器的建议).即使是那样，它与KeyboardAvoidingView的表现也不完美. 整个问题是，它无法像Android的本机AutoCompleteTextView一样工作

I need to implement AutoCompleteTextView in react native. The problem is that there is no such built-in component. All the modules and libraries available to mimic this feature is not completely similar. The main issue is the suggestions are not appearing over the view(like that of select box/picker). Even if it is then it is not behaving perfectly withKeyboardAvoidingView. The whole point is it is not working like native AutoCompleteTextView for Android

另一个解决方案是使用本机UI元素.但是我想要这个组件同时适用于iOS和Android.任何帮助，将不胜感激.

The other solution is using native UI element. But I want this component for both iOS and Android. Any help would be appreciated.

我想实现此选项，例如Facebook应用程序上的标签用户

I want to achieve this option like tag user on the Facebook app

附言:请原谅我在使用移动设备时的错字.

P.S.: Excuse the typos as I am using a mobile device.

推荐答案

大量搜索了可用的库和模块后，我想到了自己的自定义AutoCompleteTextView实现.
我为AutoCompleteTextView创建了要点.
背后的想法:

After searching a lot for available Libraries and module, I came up with my own implementation of custom AutoCompleteTextView.
I have created a gist for AutoCompleteTextView.
The idea behind:

*此字段键盘的焦点上出现一个输入字段.

*There is one input field on the focus of this field keyboard appears.

*当键盘出现时，我们将计算从顶部到输入字段以及从输入字段到小键盘区域开始的空间.

*When keyboard appears we calculate space from top to input field and from input field till the start of keypad area.

*根据上面的空间计算，将在输入字段的顶部或底部显示绝对定位的滚动视图建议区域.

*Will display an absolute positioned scroll view Suggestion area on top or bottom of input field based on the space calculation above.

*当键盘消失时，我们将隐藏建议区域.

*When keyboard goes away we hide the suggestion area.

欢迎提出有关如何改进此问题的建议.

Suggestions are welcome on how to improve this thing.

这篇关于AutoCompleteTextView在React Native中与iOS和Android兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！