Разработка интерфейса в React Native: страница авторизации

Разработка интерфейса в React Native: страница авторизации

В этой серии уроков мы изучаем, как использовать React Native для создания шаблонов типовых страниц мобильных приложений. Страницы, которые мы будем создавать в ходе уроков, не являются полнофункциональными. Наша главная цель – научиться использовать компоненты React Native в разработке интерфейса приложения.

Разработка интерфейса в React Native: страница авторизации

Для лучшего усвоения материалов я предлагаю вам попытаться самостоятельно воссоздать раскладку каждой страницы, прежде чем переходить к пошаговой инструкции, изложенной в статье. Простое чтение инструкции ничему вас не научит – попробуйте сделать шаблон своими силами и только после этого смотрите готовые ответы. Если ваш вариант макета будет внешне похож на мой, сравните код, и сделайте выводы о том, чей способ реализации лучше.

В этом руководстве мы создадим приведенную ниже страницу авторизации:

Разработка интерфейса в React Native: страница авторизации

  • Код страницы авторизации
  • Популярные шаблоны страниц от CodeCanyon
    • MStore Pro – шаблон для онлайн-магазина
    • Antiqueruby – шаблон в стиле Material Design
    • Конструктор приложений React App Builder
    • BeoNews Pro – для создания мобильной версии WordPress-сайта
    • Oreo Fashion – шаблоны для WooCommerce
  • Заключение
  • Приступаем к работе

    Для создания страницы авторизации на React Native мы воспользуемся Expo CLI. Это набор инструментов и служб, который связывает React Native с нативными платформами и тем самым ускоряет и упрощает разработку, отладку и развертывание приложений для сайтов, iOS и Android на основе одного и того же кода.

    Expo – самый простой и быстрый способ создания приложений на React Native. В официальной документации содержатся исчерпывающие инструкции по установке и конфигурации Expo CLI для всех наиболее популярных операционных систем.

    Создайте новый проект:

    expo init LoginLayout

    Вам будет предложено выбрать тип проекта для инициализации. Выберите «Управляемый рабочий проект» и «Пустой». Подождите несколько секунд, пока Expo распакует необходимые файлы и создаст директорию для нового проекта.

    Выполните следующую команду:

    cd LoginLayout

    Структура проекта будет такой:

    Разработка интерфейса в React Native: страница авторизации

    Для начала работы с приложением откройте файл App.js. По умолчанию код этого файла выглядит следующим образом:

    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    
    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    

    На второй строке мы импортируем React, чтобы иметь возможность использовать расширение JSX. Затем выполняется импорт ряда компонентов React Native – StyleSheet, Text и View.

    Затем идет функция App, которая возвращает компонент View и Text в качестве его дочернего элемента. Компонент <Text> предоставляет нам возможность работать с текстом.

    View – один из важнейших компонентов React Native. Он выполняет множество функций – определяет стиль различных элементов, выступает в качестве обертки или контейнера. <View> является аналогом элемента<div> в HTML. Как вы можете видеть, у компонента View есть свойство style = {styles.container}, которое используется для определения стиля.

    Расположение элементов с помощью Flexbox

    Flexbox – важнейшая техника дизайна в React Native, она обеспечивает одинаковое отображение интерфейса на экране любого размера. Flexbox в React Native работает так же, как CSS на веб-страницах, за исключением небольших отличий.

    Параметры, используемые в Flexbox по умолчанию, однако, отличаются от CSS – направление равно столбцу вместо строки, а в качестве значения свойство flex принимает только одно число.

    Flex определяет, как элементы будут заполнять доступное пространство страницы вдоль главной оси. Доступное пространство распределяется между элементами, исходя из свойства flex каждого компонента интерфейса.

    Мы определяем раскладку Flexbox внизу файла, в постоянной styles. Контейнер содержит следующие стили:

    1. flex: 1 – определяет, как элементы распределяются в свободном пространстве. Все пространство разделяется между элементами в соответствии с этим параметром..
    2. justifyContent: «center» – располагает вложенные элементы контейнера по центру, вдоль главной вертикальной оси.
    3. alignItems: «center» – выравнивает дочерние элементы по центру, вдоль поперечной оси.

    Пользовательский интерфейс и общие компоненты

    Типичный интерфейс на основе React Native использует следующие компоненты:

    1. View – контейнер для вложенных элементов.
    2. Text – неизменяемое текстовое поле.
    3. Image – поле для вывода изображения.
    4. Stylesheet – описывает стиль оформления элементов.
    5. TextInput – поле для ввода текста.
    6. Button – нажимающаяся кнопка.

    Вставка изображения

    В React Native изображения размещают в папке assets и ссылаются на них следующим образом:

    <Image source={require('.assets//image.png]')} />

    Создание анимированных приложений React с помощью React Spring

    Давайте добавим в папку assets изображение, которое будет использоваться в качестве логотипа. Начнем с удаления текстового компонента – заменим его на логотип. Не забудьте импортировать компонент Image в начале кода.

    import React from 'react';
    import { StyleSheet, Text, View, Image } from 'react-native';
    
    export default class App extends React.Component {
      render(){
        return (
          <View style={styles.container}>
            <Image source = {require("./assets/logo.png]")}/>
          </View>
        );
      }
    }
    

    Стиль оформления в React Native

    Внешний вид элементов React Native определяется с помощью JavaScript. Все элементы React Native принимают значение свойства style, которое, в свою очередь, принимает объект с названиями и значениями составляющих стилей. Эти названия и значения очень похожи на стили, используемые в CSS, за исключением того, что все переменные используют верблюжий регистр. Например, фоновой цвет в React Native задается с помощью backgroundColor, а в CSS используется формат background-color.

    Добавьте приведенный ниже стиль к изображению:

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
       },
    
       image :{
        marginBottom: 40
    
      }
        
    });
    

    Здесь мы используем границу marginBottom: 40 для нижней части изображения, чтобы между логотипом и полем ввода оставалось пространство.

    Теперь мы добавим поля для ввода текстовой информации – для адреса электронной почты и пароля. Для этого нужно сначала добавить свойство состояния для отслеживания ввода адреса и пароля. Состояние в React Native используется в компонентах, которые изменяются пользователем. Например, информация в поле TextInput изменяется, когда пользователь вводит свой адрес и пароль. Изначальное же состояние полей для ввода адреса почты и пароля будет пустым.

    Начнем с импорта useState, как показано ниже. Функция useState позволит сделать наши функциональные элементы компонентами с сохранением состояния.

    import React, { useState } from 'react';
    Теперь инициализируем состояние, добавив приведенный ниже код к функции App:
    export default function App() {
         const [email, setEmail] = useState('');
         const [password, setPassword] = useState('');
      return (
        // rest of the code
      );
    }
    

    Для задания общего стиля оформления мы оборачиваем текстовые поля элементом View. Добавьте приведенный ниже код к компоненту изображения:

    <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Email."
              placeholderTextColor="#003f5c"
              onChangeText={(email) => setEmail(email)}
            />
          </View>
    
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Password."
              placeholderTextColor="#003f5c"
              secureTextEntry={true}
              onChangeText={(password) => setPassword(password)}
            />
          </View>
    

    Метод setState передает в объект состояния информацию, которую вводит пользователь. С целью обеспечения безопасности метод secureTextEntry будет скрывать текст, набираемый пользователем в поле для ввода адреса электронной почты.

    Добавьте приведенные ниже стили в свойства компонентов inputView и textInput:

     inputView: {
        backgroundColor: "#FFC0CB",
        borderRadius: 30,
        width: "70%",
        height: 45,
        marginBottom: 20,
        alignItems: "center",
      },
    
      TextInput: {
        height: 50,
        flex: 1,
        padding: 10,
        marginLeft: 20,
      }
    

    Как протестировать React-приложения с помощью React Testing Library

    Добавьте кнопку «Забыли пароль?» под полями для ввода текста. Мы используем кнопку типа TouchableOpacity, которая меняет степень прозрачности при нажатии.

     <TouchableOpacity>
            <Text style={styles.forgot_button}>Forgot Password?</Text>
          </TouchableOpacity>
    

    Теперь добавьте следующий стиль к кнопке «Забыли пароль?»

      forgot_button: {
        height: 30,
        marginBottom: 30,
      }
    

    И, наконец, добавьте кнопку Login для авторизации. Вставьте следующий код под кнопкой «Забыли пароль?»

          <TouchableOpacity style={styles.loginBtn}>
            <Text style={styles.loginText}>LOGIN</Text>
          </TouchableOpacity>

    Добавьте следующий стиль оформления к кнопке авторизации:

     loginBtn:
      {
        width:"80%",
        borderRadius:25,
        height:50,
        alignItems:"center",
        justifyContent:"center",
        marginTop:40,
        backgroundColor:"#FF1493",
      }
    

    Здесь мы используем параметр радиуса, чтобы сделать углы кнопок закругленными, и границу marginTop: 40, чтобы задать расстояние между двумя кнопками. Мы также изменяем ширину и высоту кнопок.

    Код страницы авторизации

    Готовый код файла App.js для экрана авторизации в React Native-приложении выглядит следующим образом:

    import { StatusBar } from "expo-status-bar";
    import React, { useState } from "react";
    import {
      StyleSheet,
      Text,
      View,
      Image,
      TextInput,
      Button,
      TouchableOpacity,
    } from "react-native";
    
    export default function App() {
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
    
      return (
        <View style={styles.container}>
          <Image style={styles.image} source={require("./assets/log2.png]")} />
    
          <StatusBar style="auto" />
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Email."
              placeholderTextColor="#003f5c"
              onChangeText={(email) => setEmail(email)}
            />
          </View>
    
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Password."
              placeholderTextColor="#003f5c"
              secureTextEntry={true}
              onChangeText={(password) => setPassword(password)}
            />
          </View>
    
          <TouchableOpacity>
            <Text style={styles.forgot_button}>Forgot Password?</Text>
          </TouchableOpacity>
    
          <TouchableOpacity style={styles.loginBtn}>
            <Text style={styles.loginText}>LOGIN</Text>
          </TouchableOpacity>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
    
      image: {
        marginBottom: 40,
      },
    
      inputView: {
        backgroundColor: "#FFC0CB",
        borderRadius: 30,
        width: "70%",
        height: 45,
        marginBottom: 20,
    
        alignItems: "center",
      },
    
      TextInput: {
        height: 50,
        flex: 1,
        padding: 10,
        marginLeft: 20,
      },
    
      forgot_button: {
        height: 30,
        marginBottom: 30,
      },
    
      loginBtn: {
        width: "80%",
        borderRadius: 25,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        marginTop: 40,
        backgroundColor: "#FF1493",
      },
    });
    

    Создание профессионального React-приложения

    Готовая страница приложения выглядит следующим образом:

    Разработка интерфейса в React Native: страница авторизации

    Популярные шаблоны страниц от CodeCanyon

    Качественному приложению на основе React Native понадобится множество страниц, помимо экрана авторизации. Если для завершения вашего проекта нужны дополнительные компоненты, обратите внимание на шаблоны CodeCanyon – они просты в использовании и значительно упрощают разработку.

    1. MStore Pro – шаблон для онлайн-магазина

    MStore Pro – один из самых популярных шаблонов для React Native. Он предназначен для проектов в области электронной коммерции. У шаблона есть удобный экран авторизации с помощью SMS. В стандартную поставку входит обширный набор шаблонов страниц.

    Разработка интерфейса в React Native: страница авторизации

    2. Antiqueruby – шаблон в стиле Material Design

    В 2021 году стиль Material Design все еще преобладает в оформлении мобильных приложений, что делает пакет Antiqueruby оптимальным выбором. В набор шаблонов входят более 260 страниц, включая экраны авторизации, паттерны навигации и так далее.

    Разработка интерфейса в React Native: страница авторизации

    3. Конструктор приложений React App Builder

    Как и следует из названия, пакет React App Builder представляет собой конструктор для создания приложений. Обширный набор шаблонов страниц и компонентов позволяет реализовать проект для любого сегмента бизнеса.

    Разработка интерфейса в React Native: страница авторизации

    4. BeoNews Pro – для создания мобильной версии WordPress-сайта

    Если вам нужно создать мобильный вариант WordPress-сайта – попробуйте BeoNews Pro. Это один из самых популярных наборов шаблонов, доступных на CodeCanyon. Помимо шаблонов для экрана авторизации, BeoNews Pro включает в себя:

    • обширный набор меню;
    • стильные варианты дизайна интерфейса;
    • интегрированную аналитику Facebook, Google и Firebase.

    Разработка интерфейса в React Native: страница авторизации

    5. Oreo Fashion – шаблоны для WooCommerce

    Полный набор шаблонов из пакета Oreo Fashion позволяет легко создавать приложения для платформ iOS и Android. Формы авторизации на React Native поддерживают вход в приложение с помощью учетных записей в популярных социальных сетях. Данный пакет будет полезен, если вам необходимо создать мобильную версию WordPress-сайта, который использует надстройку для электронной коммерции WooCommerce.

    Разработка интерфейса в React Native: страница авторизации

    Заключение

    В этом руководстве мы создали стильную страницу авторизации с использованием Flexbox. Мы также рассмотрели использование Expo CLI – приложения, которое значительно упрощает процесс разработки и тестирования проектов на основе React Native.

    Наталья Кайдаавтор-переводчик статьи «Common React Native App Layouts: Login Page»

    Источник: www.internet-technologies.ru

    НЕТ КОММЕНТАРИЕВ

    Оставить комментарий