Создайте тщательно продуманный дизайн UI-UX для входа и регистрации, используя код javascript.
Привет, разработчики .. !!
Хорошо, это будет быстро. Проектирование - важная часть программирования, поскольку оно улучшает взаимодействие с пользователем и делает приложение динамичным и удобным для пользователя. Приступим к созданию страницы входа и регистрации, которая требуется практически в каждом мобильном приложении. А если вы разработчик пользовательского интерфейса, то вам придется столкнуться с этим на каком-то этапе своей карьеры программиста.
Результат нашего проекта будет выглядеть так же, как на изображении выше.
Настройка и установка
Мы используем последнюю версию React navigation 6 для переключения между экранами и компоненты NativeBase для создания пользовательского интерфейса. Чтобы использовать это, мы должны выполнить некоторую установку. Итак, давайте установим это. Убедитесь, что вы установили версию expo больше или равную 41.
Для навигации
- npm install @react -navigation / native
- npm install react-native-screen response-native-safe-area-context
- npm install @react -navigation / stack response-native-gesture-handler
Для NativeBase
- npm install native-base styled-components styled-system
- expo install react-native-svg
- expo install react-native-safe-area-context
Для иконок
- npm install @ expo / vector-icons
Что ж, это длинный список установок, но мы должны установить их, поскольку мы собираемся использовать их в нашем приложении.
Часть кода
App.js
Мы добавляем здесь два экрана, один для входа в систему, а другой для регистрации в навигаторе стека.
Login.js и Registration.js
Пользовательский интерфейс обоих экранов создан с помощью компонента NativeBase. Мы добавили функцию безопасного ввода текста в раздел паролей. И добавил поле (ранее называвшееся картой) для входа в систему с помощью Facebook, Google, Twitter или Apple ID.
Ссылка на код Github: Дизайн для входа в систему
Спасибо за прочтение. Обязательно нажмите поле для комментариев, если у вас возникли проблемы, связанные с этим проектом. Поделитесь этим со своим сообществом, если статья окажется полезной.
