В сегодняшнем уроке мы будем работать над настройкой наших конфигураций API. Итак, вперед, ваша первая работа:

TODO #1: Создайте папку services/api/ в папке src/ — так у вас будет /src/services/api

TODO № 2: Создайте файл constants.js в папке /src/services/api.

В этом файле constants.js мы будем обрабатывать множество вещей, например среды. Да, с expo вы можете кодировать для разных сред (т. е. разработки, подготовки, производства).

TODO № 3: Скопируйте следующий код в файл constants.js.

const api_url = function() {
 let api_url = '';
 if (process.env["APP_ENV"] == 'production') {
    api_url = "https://production.dancingnomads.com";
 } else if (process.env["APP_ENV"] == 'staging') {
    api_url = "https://staging.dancingnomads.com"
 } else {
    api_url = 'http://xxx.xxx.xxx.xxx:3001' // Need to use ifconfig to find the private IP of your computer. localhost doesn't work because the app is running an emulator.
 }
 return api_url
}
const host_url_without_http = function(){
 let host_url_without_http='';
 if (process.env["APP_ENV"] == 'production') {
    host_url_without_http = "production.dancingnomads.com";
 } else if (process.env["APP_ENV"] == 'staging') {
    host_url_without_http = "staging.dancingnomads.com"
 } else {
    host_url_without_http = 'xxx.xxx.xxx.xxx:3001' // Need to use ifconfig to find the private IP of your computer. localhost doesn't work because the app is running an emulator.
 }
 return host_url_without_http
}
export const url = api_url();
export const host_url = host_url_without_http();
  • *Примечание 1: это НЕ то, как вы будете обрабатывать среды в react native, это будет работать с reactjs (для веб-приложения), но с react native мы будем делать что-то другое, чему мы научимся на более поздних уроках.

На самом деле, большая часть кода останется прежней. Для react native нужно будет изменить только условные выражения.

Но концепция остается той же, мы будем использовать условное выражение (например, process.env["APP_ENV"] == 'production'), чтобы определить, находимся ли мы в production, который установит для нашего api_url конечную точку рабочего базового URL.

То же самое мы делаем для постановки и разработки. Вот как мы обрабатываем разные базовые URL для разных сред. Конечно, это условное условие изменится (для реагирования на нативные).

  • * Примечание 2.Для Expo localhost (используемый для веб-приложений) не будет работать в разработке. Вам нужно зайти в свой терминал и ввести:
ifconfig

TODO #4: возьмите 172.31.99.66 и замените "xxx.xxx.xxx.xxx" в api_url = 'http ://xxx.xxx.xxx.xxx:3001'

  • * Примечание 3.Вам придется выполнять этот процесс ifconfig и изменять api_url каждый раз, когда вы посещаете новый кафе и используйте другой Wi-Fi.

Какая разница?

export const url = api_url();
export const host_url = host_url_without_http();

Вы, наверное, заметили, что api_url() возвращает base_url с http(s). и host_url_without_http() возвращает base_url без http(s). Это все.

Фу, вот и все на сегодняшнем уроке!

Надеюсь, вы весело провели время и узнали что-то новое сегодня! Не забудьте похлопать этому посту! :)

Не любите читать? Попробуйте посмотреть видео

Справочные ссылки

ifconfig: https://en.wikipedia.org/wiki/Ifconfig

Свяжись со мной!

Linkedin: https://www.linkedin.com/in/donaldlee50
Instagram: https://www.instagram.com/donaldlee50/
Twitter: https://twitter. com/donaldlee50
Youtube: https://youtube.com/coursehack
Список рассылки: http://bit.ly/coursehack-mailing-list
Группа Coursehack в Facebook : bit.ly/join-coursehack-facebook-group

** Не забудьте поаплодировать и поделиться с другими разработчиками React Native & Expo!