В этом руководстве является третьей частью нашей собственной комфортной автомобильной парковки APC UI серии UI. В Предыдущая часть Мы успешно реализовали переход прокрутки мест для парковки автомобилей. В этом руководстве мы продолжим, откуда мы остановились в последней части. Таким образом, рекомендуется пройти предыдущую часть, чтобы получить полное понимание проекта.
Как указано в предыдущих частях, серия учебник была вдохновлена Магазин локаторный шаблон приложения Это дает нам динамический, полностью закодированный стартовый комплект, написанный в реакции, на котором любой может использовать для создания собственного локатора магазина реагировать на собственное применение или инициировать свой собственный запуск. И эта вторая часть также является продолжением реализаций кодирования и дизайна от видеоуправления YouTube by Ract ui kit Для кемпинга Ptons Finder App Clone. Видеоуправление использует технологию быстрой кодирования для реализации этого клона пользовательского интерфейса, который может быть трудно понять для любого разработчика, особенно новичков. Это написанное руководство обеспечивает шаг за счет реализации, которая будет легче понимать и реализовать.
Обзор
В этой третьей части этого учебника мы собираемся добавить дополнительную информацию на нашу парковочные карты парковки на экране карты, а также в стиле его правильно. Идея состоит в том, чтобы интегрировать парковочные данные на автостоянке на вакансию для парковки, которую мы реализовали с переходом прокрутки в последнем руководстве. Затем мы собираемся добавить некоторые компоненты и стили кнопок на карту, чтобы она выглядела привлекательной. Мы также собираемся правильно использовать векторные иконки и стиль.
Итак, давайте начнем !!
Добавление информации о парковке автомобилей
Здесь мы собираемся добавить дополнительную информацию о стойке автостоянки на нашу парковку парковки на парковке. Мы также собираемся стилься, чтобы он выглядел привлекательно. Теперь мы собираемся использовать некоторые дополнительные данные из ParkingsPots Массив и использовать его в RenderParking () Метод, как показано в фрагменте кода ниже:
renderParking(item){
return(
x {item.spots} {item.title}
${item.price}
{item.rating}
)
}
Здесь у нас есть родитель Вид Компонент, упаковочный два ребенка Вид составные части. Первый ребенок Вид Компонент имеет некоторые встроенные стили с пятна и Название Информация. И второй Вид Компонент имеет Цена и Рейтинг Информация. Требуемый стиль предоставляется в фрагменте кода ниже:
parking : {
flexDirection : 'row',
backgroundColor : 'white',
borderRadius : 6,
padding : 24,
marginHorizontal: 24,
width : width - ( 24 * 2 )
}
Следовательно, мы получим следующий результат в нашем экране эмулятора:
Как мы видим, на парковке появилась дополнительная информация о парковке. Но нам нужно добавить дополнительную информацию из нашего ParkingsPots множество.
Добавление значения времени для парковки
Здесь мы собираемся добавить ценность времени для каждой карты парковки. Для этого нам нужно определить государство под названием Часы Как показано в фрагменте кода ниже:
state = {
hours: {},
}
Читать далее…
Пост Rect Nource Car Parking Finder App UI клон № 3: Парковка Spot Cards появился в первую очередь на Крисс Отказ
Раскрытие
Этот пост включает в себя партнерские ссылки; Я могу получить компенсацию, если вы приобретете продукты или услуги из разных ссылок, представленных в этой статье.