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

Начальная загрузка React Native приложения

В этом уроке я буду использовать expo cli, все должно работать нормально для всех, кто использует React Native cli. Давайте создадим приложение, выполнив команду, как показано на скриншоте ниже, выберите пустой шаблон (Typescript), так как мы будем использовать машинописный текст.

Установка зависимостей

Нам нужно установить все необходимые для этого приложения зависимости — Tailwind CSS и Heroicons.

cd react-native-auth-flow yarn add tailwindcss-react-native react-native-heroicons react-native-svg yarn add --dev tailwindcss

Настройка React NativeTailwind CSS

Шаг 1:

Создайте файл tailwind.config.js в корне вашего проекта и измените его содержимое следующим образом:

Шаг 2:

Добавить плагин React Native Tailwind CSS Babel

Шаг 3:

Создайте tailwindcss-react-native.d.ts в корне вашего проекта и добавьте этот единственный импорт. Если вы используете машинописный текст и не добавите его, вы не сможете использовать имя класса в своем приложении.

import "tailwindcss-react-native/types.d";

Шаг 4

Это последний шаг. Нам нужно обернуть все наше приложение поставщиком попутного ветра. Измените свой App.js, чтобы добавить TailwindProvider:

Создание экранов

Создайте папку с именем screens в корне проекта и создайте три экрана: Login, Register и Dashboard.

Проект должен выглядеть так:

Чтобы начать разработку экранов, нам нужно создать несколько повторно используемых пользовательских компонентов. Создайте папку с именем Компоненты.

Первый компонент будет компонентом-контейнером, это будет контейнер-оболочка приложения. В папке компонентов проекта создайте файл с именем MainContainer.tsx и измените его.

В папке Container создайте файл с именем KeyboardAvoidWrapper.tsx следующим образом:

Создайте папку с именем InputText в папке компонента, а затем создайте файл и назовите его CustomTextInput.tsx. Измените содержимое следующим образом:

Обратите внимание, что в строке 3 кода мы используем InputProps. Это интерфейс машинописного текста для пользовательских реквизитов ввода. Давайте создадим файл прямо сейчас. В корне проекта создайте файл с именем auth-app.d.ts и добавьте приведенный ниже код.

CustomButtonProps будет использоваться позже нашим компонентом пользовательской кнопки.

Создайте папку в папке компонентов с именем Buttons и создайте файл с именем CustomButton.tsx.

Добавьте файл с именем Components/Card/DashBoardCard.tsx следующим образом:

Откройте файл входа и измените содержимое следующим образом:

Этот экран похож на экран входа в систему. Они оба использовали ввод текста и кнопки.

Это последний оставшийся экран. Измените файл Dashboard следующим образом:

Вот оно! Вы можете найти полный исходный код в моем репозитории Github.

Первоначально опубликовано на http://www.developerslearnit.com 7 августа 2022 г.