SearchBar — Redux — React Native — Урок 4 — Level 2

Автор Filip Sergienko
SearchBar — Redux — React Native — Урок 4 — Level 2

хелд SsangYong реактивный и тема сегодняшнего урока серых бар.

Мы сегодня с вами создадим компонент сервис бар стилизуем его автокомпонент где мы будем набирать названия наших фильмов эти фильмы будут встречаться с сервера вот так будет выглядеть наш компонент. Серый — это текстовое поле для ввода название фильма иконка с изображением лупы. Так мы находимся в корне проектом первое, что нужно сделать нам нужно скопировать компонент header component очень похож на него по стилям, что мы будем менять на серверах соответственно переименовываем его называем сердце бар.

Так теперь меняем название когда мы меняем на сердце бар и соответственно экспорт меня на сердце бар поменяли дальше нам нужно импортировать его наружу.

В общем копируемый экспорт меня всё по аналогии как этими компонентами которой. Версаль из-за этого ну, что много парень фактором. Удалить всё ненужное добавим нужно так удаляемые вселенные кнопки либо кнопок у нас нет в этом Kia Cee'd дальше создаем событие onchange текст — это событие где мы будем водить Holder умолчанию значение дефолтные текстуры понимала, что вообще зачем и как бы сама значение и событие onblur на официальном сайте реакт натив. Мы заходим документация и посмотрим наш component Input набирает в поиске его текст 1 фут потом. Заходим в него посмотрим, что у нас есть так и его свойства свойства практике наша. Вот он Blur метод манчини onchange Text дальше у нас стоит Holder будем передавать у него в армию будем следовать его сегодня сможете почитать, что зачем как протестировать всё для того чтобы понимать для формочек для инпутов — это то, что вы будете использовать повсеместным продолжаем удаляю ненужные нам стиле добавляем нужно будет у нас сад контейнер далее удаляем опять же его стиль для кнопки и. Добавляем еще дополнительные стили — это у нас будет стили для Input of и стили для кнопки с анимацией там настроит сердце Style удаляю на пять левую кнопку поздравляем контейнер Stalker будет заворачиваем у него завернул. Мы в него нашли иконку и input далее мы сами создаем текст Input component импортируемого из библиотеки react native импортируем текста используется новым текст на текст и тут так, что теперь придаем — это у нас будет Input Style. Удали мы создаем. Передаем события он change текст placeholder — это надпись по умолчанию для записи в армию валяю значение этого компонента, но всё равно болею и он Blur — это событие. Когда мы будем например нажимать на поле вне текста Input to вызываться будет этот метод. Метод нужно для того чтобы менять фильтр на separ поворот создаем контейнер ещё один дюйм для нашей кнопки название сердца 0 выровняли всё. Нам нужно удалить. Оникс в этом кесарево не используем и поле. Тайсон точнее просто этого также для. Мстители лишний текст Style icon Flat Style не понадобится нам в этом. Потому, что я уроки ещё раз повторять нет так рефакторинг justify-content-center уравнение будет по центру наших элементов далее мы сдаемся контейнер засыпается волос с. Днём в. ВК по левому и правому margin-top отступ сверху на 40 line поэтому у нас центр выравнивание по центру Flex Direction направление переворачивай её и ширина будет у нас ширина девайса -35 адаптивная верстка блокнота устройство и background-color нас белым-бело я понял свет 3F высота у нас будет депутат 40 background Border radius у нас будет 20 так дальше не слайм стерилизуем Input Style он сайз размер иконки у него будет 18 дальше высота его 23 ширина нас ширина одевается -90 отступ слева у нас будет. Я всё прочитал устал так, что мы не заморачивайся с этим может ещё раз повторяю — это всё индивидуально и как говорится на вкус и цвет стерилизуют тебя на ваш взгляд. Как высчитать. Правильно жизнь если, что участвовать так дальше стерилизуем нашей конкурсе рассчитаю justify-content-center и line icons также центр background-color у нас будет чёрный цвет и высота у нас будет 40 ширина у нас будет также 40 border-radius нас 20 так icon Style No saikon расставил мы удаляем здесь добавляем соответствующие Imagine Left margin Top у нас будет 2 так ржала всё сохраняем component Search Bar. Мы создали стерилизовали теперь, что нам нужно мой скрин один компонент с крюком и импортируемого добавляем называется у нас бар импорт из компании. Титан дальше мы устанавливаем дефолтное значение boolean boolean True false у нас будет соответственно изначально связи был. Черчилль бар будет ты сложно и мы будем менять его исходя из нашей задачи так с этим бизибокс Reborn далее мы создаем через терновник условия где мы будем показывать один компонент либо другой компонент в зависимости от нашего визибл searchguard — это если ложь нас будет показываться одно противном случае другое. То есть везде был если равно круто у нас будет. Север хочу бар отображаться в противном случае у нас будет отображаться. Кедр водка стартер на kik сообщение удобный способ импортировать. Наргиз синтаксис тернарного оператора. Пользуйтесь на здоровье. Мне очень нравится Must have так дальше мы. Передаем свойства — это колорит у нас будет белый цвет дальше у нас icon Right нужно передать него название у нас — это глупо из материалов. Как называется magnify placeholder у нас будет равен значению сердце. Чтобы пользователь понимал, что здесь нужно вводить что-то что-то нужно искать событие onchange текст мы будем брать из текста функции которые чуть попозже напишем — это будет Helper наш так.

0 комментариев
0

Читайте также