Я уже некоторое время откладывал обучение, отреагирующая нативно. После работы с React довольно давно, это очевидный следующий шаг.
Итак, я отправился в Удеми и начал высоко оцененный Стивен Гридер курс .
Он создал ресторанное приложение с Yelp API, но, поскольку Yelp не доступен в Индии, я решил продолжить с Zomato API. Zomato – популярная платформа для доставки продуктов питания в Индии.
В нашем приложении для поиска в ресторане будет поисковый балл, чтобы искать что -либо о еде, а затем три категории ресторанов – экономически эффективные, кусочки и большие спонсоры.
Мы создадим наш нативный проект React с использованием Expo-CLI. Итак, зайдите в терминал и запустите ниже команду.
npx expo-cli init restroSearch
Он покажет экран ниже. Нажмите Ввод.
Экран
Затем нам будет предложено ввести имя проекта. Введите то же имя Restrosearch и нажмите Enter.
Имя
После того, как установка будет сделана, она создаст новую ресторану папок. Изменить это и запустить NPM. Он откроет http://localhost: 19002/ в браузере.
Localhost
Теперь я запускаю вывод на физическом устройстве Android. Для запуска на физическом устройстве вам нужно отправиться в магазин и установить Expo
Теперь откройте приложение на своем телефоне. Вы получите экран ниже.
Expo App
Нажмите на сканирование QR -кода, он откроет камеру. Укажите его на QR -код в браузере, и вы будете на экране ниже, после того как вся установка будет сделана.
Первоначальное приложение
Мы будем использовать StackNavigator в нашем проекте. Итак, продолжайте и установите эти зависимости.
npm install react-navigation npx expo-cli install react-native-gesture-handler react-native-reanimated
Откройте свой проект в коде Visual Studio и замените контент app.js на ниже.
Новое приложение
Теперь создайте файл searchscreen.js внутри SRC -> экранов. Вам также нужно создать эти две папки.
SEACKSCEREN
Это изменит наше приложение в нашем приложении Android и отобразит компонент Search Screen.
SEACKSCEREN
Давайте сначала создадим SearchBar. Сначала создайте папку компонентов внутри SRC. Создайте файл searchbar.js внутри него. Добавьте в него приведенный ниже контент.
Здесь мы используем View, TextInput, StyleShipe от React-Cnitals. Мы также используем значок для поиска из Expo.
Стиль в React Native в основном выполняется с помощью нотации Camelcase.
Панель поиска
Теперь наше приложение будет выглядеть ниже.
Поиск ресторана
Мы передадим состояние от нашего родительского компонента SearchScreen в SearchBar и будем использовать обратный вызов, чтобы изменить его с SearchBar.
Итак, откройте SearchScreen.js и добавьте состояние и передайте его в SearchBar.
Search Screen меняется
Теперь мы будем использовать их в нашем компоненте SearchBar.
SearchBar изменяется
Наш поиск должен начинаться только тогда, когда пользователь нажимает Enter на устройстве. Итак, мы добавим логику для того же следующего. Добавьте новый обратный вызов в Search Screen. Позже мы будем использовать его, чтобы вызвать API Zomato.
SEACKSCEREN
Затем добавьте то же самое в компонент SearchBar.
Панель поиска
Теперь мы можем проверить это. Откройте приложение для Android, а затем введите на него что -нибудь и нажмите клавишу Green Enter.
Идет поиск
Мы можем увидеть журнал консоли в нашем терминале после отправки.
консольный журнал
Затем мы сделаем звонок API, чтобы получить список ресторанов и поиск всего. Итак, отправляйтесь в https://developers.zomato.com/api И получите свои клавиши API.
Документация Zomato довольно хороша и содержит чванство, поэтому вы можете проверить самой API.
Zomato Swagger
В основном мы будем использовать API поиска в ресторане. Я буду искать только рестораны в Бангалоре, поэтому мы будем использовать приведенный ниже API. Мы также должны пройти наши клавиши API в заголовке.
https://developers.zomato.com/api/v2.1/search?entity_id=4&entity_type=city&q=Kabab
Далее мы перейдем к терминалу и установите Axios
npm install axios
Кроме того, чтобы использовать API Zomato, мы будем использовать метод экземпляра Axios. Создайте API папки внутри SRC и файл Zomato.js внутри.
Zomato файл
Далее мы будем создавать многоразовый крючок. Создайте крючки папки внутри SRC и файл useresults.js внутри него. Здесь мы попадаем в URL -адрес Zomato и устанавливаем результаты в результатах. Мы также используем начальный поиск, так что, когда приложение загружается, мы получаем некоторые данные.
крючки
Теперь мы будем использовать эти крючки в нашем компоненте Search Screen.
Используя крючки
Теперь я наше приложение для Android, мы получаем результат.
API
Далее мы создадим компонент, чтобы показать этот результат на экране. Мы создадим компонент resultslist.js
Результат
Далее мы передадим заголовок из Search Screen
SEACKSCEREN
В нашем приложении мы показываем три разные категории ресторанов по цене. Теперь Zomato категории их по значению Price_range. Мы будем отфильтровать массив и передавать разные цены в разные результаты.
Ценообразование
Далее, давайте использовать это в компоненте ResultSlist.
Результат
Это покажет ниже в нашем приложении.
Результат
Теперь давайте используем данные, показывайте их правильно. Мы будем использовать Flatlist для отображения горизонтального списка, но используем другой компонент, чтобы показать каждый элемент.
Flat -Stiled
Далее мы создадим компонент результатов. Это просто возьмите предмет, который проходит и показывает его с некоторым стилем.
Результаты
Это покажет как почти полная версия приложения.
Приложение
Вы, возможно, заметили, мы не смогли прокрутить вертикально на телефоне Android. Итак, чтобы решить эту проблему, мы должны использовать ScrollView, чтобы обернуть наш список, а также изменить представление и опустошить div <>
Проверка прокрутки
Теперь мы добавим логику, чтобы показать более подробную информацию о отдельном ресторане, когда пользователь нажимает на нее. Для этого мы должны создать новый экран. Давайте сначала подключим это в app.js
Приложение
Затем мы добавим логику навигации в компонент ResultSlist. Мы используем снавигацию и передаем идентификатор ресторана в компонент результатов. С обернуты
Навигация
Теперь папка внутри экранов создает компонент ResultsScreen. Здесь мы получаем идентификатор от родительского компонента и используем его для другого вызова API в Zomato API, чтобы получить детали ресторана.
Результаты Showscreen
Далее мы добавим несколько элементов, чтобы показать некоторые подробности о ресторане.
Некоторые элементы
Далее мы добавим несколько стилей для этих элементов.
Некоторые стили
Теперь нажмите на любой ресторан, и он откроет детали ресторана.
Детали ресторана
Вы можете найти код для того же самого в GitHub Здесь и файл APK можно загрузить из Здесь Анкет
Оригинал: “https://dev.to/nabendu82/restaurant-search-app-with-react-native-using-zomato-api-5g5b”