Если вы похожи на меня, который хотел абсолютный выпадающий вид на результаты SearchBar и не повезло, и Google направил вас к этой пустынной статье, тогда ваше здоровье
Мне было трудно найти библиотеку или компонент, которая дала такие результаты, есть раскрывающийся список, но они будут продвигать предыдущее представление ниже, конечно, не хочу этого (или, может быть, я не могу быть программистом и не знаю, как Чтобы запросить Google справа). Я не использовал никаких сторонних библиотек, чтобы сделать это простым и простым Но вы можете использовать Blurview, чтобы сделать фон, немного исчезненный для классного взгляда, вот простое руководство для добавления Blurview , продвигая другие мои статьи, как араб. 😁
export default function App() {
return (
Здесь давайте объявим некоторые переменные:
const [dataSource] = useState(['apple', 'banana', 'cow', 'dex', 'zee', 'orange', 'air', 'bottle']) const [filtered, setFiltered] = useState(dataSource) const [searching, setSearching] = useState(false)
- DataSource это хранить основные данные.
- Фильтрованный Массив должен хранить поисковые данные.
- Поиск Флаг должен определить, ищет ли пользователь или нет (нужно, чтобы он отобразился
Сначала инициализируйте свой компонент, сделайте это классом или функционированием, что бы вы ни хотели, я предпочитаю функциональные компоненты для Бога, знает, какая причина, и мы имитируем функциональность SearchBar с помощью текстового средства, это здорово использовать TextInput для поиска, потому что вы можете настроить его к бесконечному Позибилиты, тогда как библиотеки SearchBar ограничивают вас так или иначе И затем нет необходимости добавлять тяжелую библиотеку с этим компонентами и увеличить размер вашего приложения. Здесь мы просто предоставили нашу компоненту мероприятие по заполнителю поиска и Onchangetext.
Хорошо, вот сделка сейчас в конце вашего взгляда, я имею в виду это, все это в самом нижней части вашего оператора возврата идите и позвоните своему раскрывающемуся компоненту
{/* Add all your components here or replace all this code to your components. */}
{/* and at the end of view */}
{
searching &&
setSearching(false)}
dataSource={filtered} />
}
)}
Мы использовали наш поиск флага, чтобы показать наш компонент, когда пользователь будет искать, он будет отображаться, а не иначе. В нашем компоненте мы делаем паузу массива для опоры данных, это результат фильтрованного поиска, который мы хотим отобразить в нашем раскрывающемся списке. Теперь давайте отправимся в функциональность поиска:
const onSearch = (text) => {
if (text) {
setSearching(true) //to show dropdown make it true
const temp = text.toLowerCase() //making text lowercase to search
//filter main dataSource and put result in temp array
const tempList = dataSource.filter(item => {
if (item.match(temp))
return item
})
//at the end of search setFiltered array to searched temp array.
setFiltered(tempList)
}
//if nothing was searched
else {
setSearching(false) //set searching to false
}
}
Таким образом, наша функциональность завершена, теперь нам нужно спроектировать наш пользовательский интерфейс, чтобы отобразить наш Dropdownlist, направляясь к Searchdropdown.js
export default function SearchDropDown(props) {
const { dataSource } = props //take data from parent
return (
//main container to position list over parent.
{
//if search results matched it'll have some length.
dataSource.length ?
//then show results
dataSource.map(item => {
return (
{item}
)
})
//if there were no results show no result text instead of empty view
:
No search items matched
}
)
Чтобы сделать его еще более плавным, мы заменили родительский вид на TouchablePacity и использовали метод обратного вызова от родителей, он закроет представление поиска, нажав в любом месте пустого на экране.
Это все люди! Вот ссылка на GitHub Repo https://github.com/swairaq/ddropdownsearch , запуск исходного кода. Есть много вещей, которые могут пойти правильно Но вам нужно синхронизировать этот базовый фрагмент с дизайном и потоком вашего приложения.
Счастливого Коди …. Сначала бросьте свое сердце !!! Счастливого кодирования!
Оригинал: “https://dev.to/swair_aq/react-native-dropdown-search-bar-2kjh”