Приложение для знакомств с React Native

Эта третья часть из этой серии серьезно задерживается. Я не писал этот пост раньше, потому что, честно говоря, считал, что интерес к этой серии невелик. Но теперь, когда из-за пандемии в домах стало больше людей, я думаю, что должен закончить эту серию и покончить с этим. Итак, мы здесь. Предлагаю вам ознакомиться с предыдущими статьями.Часть 1 и Часть 2. Кроме того, свяжитесь со мной в LinkedIn и подпишитесь на меня на GitHub, чтобы не пропустить ни одной публикации в будущем. Давайте начнем.

Ранее…

Напомним, что в предыдущей статье мы рассмотрели аутентификацию пользователей с помощью Firebase Phone Authentication. На этом первая часть приложения завершена. В этой истории мы разберемся с настройкой профиля пользователя. Надеюсь, вы хотя бы взглянули на код приложения. Если нет, вы можете сделать это здесь.

Вторая часть

В этой части мы реализуем создание профиля пользователя. Это файл ProfileSetup.js в папке screens. Это выглядит примерно так.

Выглядит аккуратно, я думаю. Итак, давайте обсудим, как настроить это вместе с логикой. Сначала давайте посмотрим на зависимости. Большинство из них говорят сами за себя. NetInfo, Geolocation и AsyncStorage — это API-интерфейсы, созданные для реагирования. Модули storage и firestore импортируются для использования Firebase.

ImagePicker позволяет пользователю выбирать изображение с телефона и обрезать его по своему вкусу. Это аватар, который позже будет загружен в хранилище. И, наконец, react-native-elements — это пакет пользовательского интерфейса, который я использую. Он содержит элементы пользовательского интерфейса, такие как кнопки, модальные окна и тому подобное. Это также использовалось в предыдущих экранах.

Штат

Я займу немного времени, чтобы объяснить состояние компонента. Переменная loading указывает, находимся ли мы в состоянии загрузки или нет, например, загружается ли аватар, мы находимся в состоянии загрузки и можем отображать другой экран. Переменная errorMessage представляет собой строку, описывающую возникшую ошибку, ответ используется для временного удержания выбранного аватара перед его загрузкой и pictureSelected. просто сообщает нам, было ли выбрано изображение аватара или нет. Остальные переменные говорят сами за себя.

Передняя часть

Давайте посмотрим на код внутри метода render(). Опять же, здесь особо нечего объяснять. Я использовал компоненты Avatar, Input, Header, Button из react-native-elements. ScrollView и Text взяты из react-native.

Следует отметить компонент SegmentedControlTab. Я нашел этот пакет на npm и решил использовать его, так как это хороший способ получить информацию о поле и предпочтениях пользователя, а также выглядит довольно хорошо. Переменные profileGenderIndex и profilePreferenceIndex в состоянии используются для отслеживания вариантов выбора в двух сегментах.

Входной поток

Это был пользовательский интерфейс для этого экрана. Теперь сосредоточимся на том, как пользователь взаимодействует с экраном. Идем дальше и взглянем на все функции в компоненте. Я объясню функциональность каждого вкратце. Поток простой и выглядит примерно так:

Пользователь выбирает аватар
Пользователь вводит другие данные о себе
Наконец, они нажимают кнопку Создать профиль, которая запускает цепочку функций.

Логика

Когда пользователь нажимает кнопку «Создать профиль», выполняется функция createProfile(), которая по сути является такой вызывающей функцией для других функций.

createProfile() { 
    this.setState({ loading: true, errorMessage: ‘ERR_UNKNOWN’ });      
    this.checkInternet() 
        .then(() => this.checkProfileValues()) 
        .then(() => this.uploadAvatar())
        .then(() => this.getAvatarUrl()) 
        .then(() => this.getLocation()) 
        .catch(error => { 
            this.setState({ loading: false }); 
            const { errorMessage } = this.state; 
            switch (errorMessage) {
                case 'ERR_NO_INTERNET':                                                                                      
                ToastAndroid.show('No internet', ToastAndroid.LONG);                         
                break
                ....
}

Я использовал асинхронные функции вместе с then и catch для цепочки выполнения функций. Функции в порядке их выполнения:

checkInternet: использует NetInfo для проверки наличия активного интернет-соединения. Если нет, то выдает ошибку.
checkProfileValues: Проверяет, что введенные значения не являются нулевыми и выбраны варианты. Выдает ошибку, если нет.
uploadAvatar: загружает аватар, если он выбран, в хранилище Firebase. Выдает ошибку, если загрузка не удалась. Занимает наибольшее время для завершения выполнения.
getAvatarUrl: получить URL-адрес загруженного аватара и сохранить его в AsyncStorage для последующего использования. Выдает ошибку, если какая-либо операция не удалась.
getLocation: получает текущее местоположение пользователя, используя Geolocation и Here API, чтобы создать ссылку для Firestore.
createFirestoreProfile: эта функция, вызываемая внутри getLocation, загружает все значения профиля в Firestore в userDocumentReference, созданном в формате 'country/state-district/phoneNumber'. Читайте вторую часть серии, где я рассказываю об этом более подробно.

Остальная часть функции занимается обработкой ошибок. На основе строки ошибки отображается всплывающее сообщение, уведомляющее пользователя о возникшей ошибке. Если функция завершает выполнение без каких-либо ошибок, мы переходим к следующему экрану, который является основным экраном. Эта строка является последней строкой в функции createFirestoreProfile.

Actions.push(‘bottomNavigator’);

Actions — это импорт react-native-router-flux, который представляет собой пакет маршрутизации, который я использую. Функция push поместит новый экран в стек.

Вывод

Я знаю, что это может быть слишком много информации, но я предлагаю, если вы хотите хорошо понять это, просмотреть код один раз. Если вы чувствуете, что вам нужно поговорить со мной о чем-либо, не стесняйтесь отправить мне сообщение в LinkedIn. Свяжись со мной, если хочешь. Вы также можете следить за мной на GitHub.

В следующей части мы обсудим основную часть приложения, в которой происходит свайп и все остальное. Подпишитесь на меня здесь, на Medium, чтобы оставаться в курсе. Пожалуйста, дайте несколько аплодисментов этой статье и спасибо за чтение! О, и оставайся дома!

Приложение для знакомств с React Native — часть 3