Приложение чата с React Native 1-Постройте элементы повторного использования пользовательского интерфейса с использованием реагируемой бумаги.

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

В этой серии учебных пособий я собираюсь использовать все последние пакеты версий, описанные ранее, чтобы продемонстрировать, как построить приложение с REACT Native в 2020 году. Вы собираетесь многое узнать об этих библиотеках, следуя, а также создаете приложение для чата.

Цель этого учебника – ознакомить вас со всеми последними обновлениями в Native World React и его библиотеками, такими как React-Navigation и Реактивная коляска Это часто выбор. Если вы хотите добавить новую функцию, которая не рассматривается в этом уроке, не стесняйтесь делать это и следить за своим собственным темпом.

Требования

Следующие требования убедитесь, что у вас есть подходящая среда разработки:

• Node.js выше 10.x.x Установлен на местной машине
• JavaScript/ES6 Основы
• Watchman установлен Watchmer File Watcher
• React-Cli-Cli установлен через NPM или доступ через NPX
• Реакция навигации
• Firebase проект
• Реактивная коляска
• Реактивная личная бумага

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

Кроме того, обратите внимание, что в следующем учебном пособии будет использоваться версия-реагируйте 0,61,5 . Пожалуйста, убедитесь, что вы используете версию React Native выше 0,60.x Анкет

Установка библиотек

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

npx react-native init ChatApp

# navigate inside the project directory
cd ChatApp

# install following libraries for navigationOptions
yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-paper react-native-vector-icons

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

• Реактивная личная бумага
• Реакция навигации

Эти инструкции могут измениться в будущем, поэтому лучше следовать официальной документации.

Пользователи iOS, обязательно установите стручки через Кокоподы Где когда -либо необходимо.

Создание элементов многоразового формы

В этом разделе давайте создадим некоторые компоненты многоразовой формы, такие как Forminput и Formbutton Анкет Эти компоненты пользовательского интерфейса будут использоваться на двух экранах: вход в систему и регистрацию.

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

В основе этого нативного приложения React создайте новый каталог под названием SRC/ И внутри он создает новый каталог под названием составные части/ .

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

Начните с импорта следующих утверждений.

import React from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { TextInput } from 'react-native-paper';

Размеры От React Native Core API предоставляет способ получить ширину и высоту экрана. Вместо того, чтобы придавать ширину исправления и высоту в поле текстового ввода, пусть этот API рассчитывает его для нас. Вы можете получить экран и высоту приложения, добавив следующий фрагмент.

const { width, height } = Dimensions.get('screen');

Далее, экспортировать функцию по умолчанию Forminput Это будет иметь некоторый реквизит.

export default function FormInput({ labelName, ...rest }) {
  return (
    
  );
}

... отдых Реквизит должен быть последней опорой, пройденной как параметр, в противном случае вы получите ошибку. Цель передачи этой опоры состоит в том, чтобы позволить компоненту иметь другое значение реквизита.

Наконец, определите соответствующие стили для этого многоразового компонента.

const styles = StyleSheet.create({
  input: {
    marginTop: 10,
    marginBottom: 10,
    width: width / 1.5,
    height: height / 15
  }
});

Следующий многоразовый компонент будет в отдельном файле с именем Formbutton.js . Это похоже на Forminput За исключением того, что этот компонент будет использоваться для отображения кнопки на экране.

Он также собирается использовать ширину и высоту экрана, используя Размеры от React Native.

Вот полный фрагмент кода:

import React from 'react';
import { StyleSheet, Dimensions, Text } from 'react-native';
import { Button } from 'react-native-paper';

const { width, height } = Dimensions.get('screen');

export default function FormButton({ title, modeValue, ...rest }) {
  return (
    
      {title}
    
  );
}

const styles = StyleSheet.create({
  button: {
    marginTop: 10
  },
  buttonContainer: {
    width: width / 2,
    height: height / 15
  }
});

React-Cnive-Paper Библиотека пользовательского интерфейса имеет три режима для отображения кнопки.

• Текст : плоская кнопка без фона или контура
• изложено : Кнопка с контуром
• содержал : Кнопка с цветом фона и тенью возвышения

Для различных целей вы собираетесь использовать разные режимы кнопок. Вы увидите их в компонентах экрана позже. Вот почему лучше принять значение как опору ( Как упомянуто в приведенном выше фрагменте: modevalue ).

Создайте экран входа в систему

Для реализации экранов в текущем приложении начните с создания наиболее важного экрана под названием LoginScreen Анкет Это будет первоначальным маршрутом, когда пользователь не будет аутентифицирован или авторизован для ввода приложения и использования его функций.

Вот демонстрация экрана, которую вы собираетесь достичь в этом разделе.

Внутри SRC/ , создать еще один каталог под названием экраны/ . В этом каталоге мы собираемся хранить все компоненты экрана. Внутри, также создайте Loginscreen.js .

На экране входа будет четыре основных элемента пользовательского интерфейса:

• Два поля ввода текста для электронной почты и пароля пользователя
• Одна кнопка для входа и одна кнопка для перемещения на экран регистрации ( На случай, если конечный пользователь не зарегистрирован для использования приложения )

Начните с импорта следующих утверждений.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Title } from 'react-native-paper';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';

Внутри LoginScreen Функциональный компонент, определите две переменные состояния:

• Эл. адрес
• пароль

Обе эти переменные будут использоваться с Forminput компонент для получения значения учетных данных пользователя. По умолчанию у них будет пустая строка в качестве его значения.

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    
      
       setEmail(userEmail)}
      />
       setPassword(userPassword)}
      />
      
      
    
  );
}

Обратите внимание, что каждый из Forminput У элемента есть разные реквизиты. Например, компонент электронной почты имеет автокаптация установить в никто . Компонент пароля имеет SecureTextEntry Установлен логический истин. Включая других, это где ... отдых становится полезным ( Как вы видели в предыдущем разделе ).

OnChangeText Пропад принимает обратный вызов, который вызывается всякий раз, когда изменяется текст поля ввода.

Наконец, вот стили.

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f5f5f5',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleText: {
    fontSize: 24,
    marginBottom: 10
  },
  loginButtonLabel: {
    fontSize: 22
  },
  navButtonText: {
    fontSize: 16
  }
});

Обратите внимание, что вы используете объект JavaScript для определения стилей для каждого компонента. Стили -таблица В React Native предоставляет API для создания стилей внутри файла компонентов. Он требует объекта JavaScript, как и выше, и возвращает новый Стили -таблица объект из этого. Нет классы или IDS В React Native, как в веб -разработке. Чтобы создать новый объект стиля, который вы используете StyleSheet.create () метод

То, как вы определили стили с помощью объекта, является предпочтительным способом. Мало того, что это помогает вам организовать стили и держать их отдельными, но эти стили, когда они определены таким образом, также отправляются через родной рендеринг -мост только один раз ( в отличие от встроенных стилей ).

Создайте экран регистрации

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

Создайте новый файл с именем Signupscreen.js Внутри src/экраны/ каталог. Это будет похоже на экран входа в систему, который вы создали в предыдущем разделе во многих отношениях. Я собираюсь оставить вам сходство и различия между двумя экранами. Посмотрите на фрагмент кода для экран регистрации ниже.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Title, IconButton } from 'react-native-paper';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';

export default function SignupScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    
      
       setEmail(userEmail)}
      />
       setPassword(userPassword)}
      />
      
       navigation.navigate('Login')}
      />
    
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f5f5f5',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleText: {
    fontSize: 24,
    marginBottom: 10
  },
  loginButtonLabel: {
    fontSize: 22
  },
  navButtonText: {
    fontSize: 18
  },
  navButton: {
    marginTop: 10
  }
});

Основное различие в приведенном выше компонентном фрагменте заключается в том, что вы собираетесь использовать Iconbutton Чтобы перейти на экране регистрации, чтобы войти в систему. Это обеспечивается React-Cnive-Paper и на самом деле это кнопка, которая отображает значок без какого -либо метки.

Создать навигатор стека Auth

В текущем приложении будет два навигатора стека. Первый навигатор будет называться Authstack Анкет

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

Создать новый каталог SRC/навигация/ . Этот каталог будет содержать все маршруты и другие необходимые компоненты для построения навигации в приложении.

В этом каталоге создайте новый файл с именем Authstack.js Анкет Этот файл будет иметь навигатор стека.

Начните с импорта следующих операторов, включая оба компонента экрана.

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import SignupScreen from '../screens/SignupScreen';
import LoginScreen from '../screens/LoginScreen';

A Stack Navigator Предоставляет приложение Nate Rayact для транзита между различными экранами, аналогичным тому, как работает навигация в веб -браузере. Он толкает или вытаскивает экран, когда в навигационном состоянии.

Затем создайте экземпляр навигатора стека, как показано ниже.

const Stack = createStackNavigator();

Навигаторы определяются декларативно с использованием версии 5 из Реакция навигации . Это следует более на основе компонента, аналогично подходу React-Router в веб -разработке с использованием ReactJS (если вы с ней знакомы).

Createstacknavigator это функция, используемая для реализации шаблона навигации стека. Эта функция возвращает два компонента React: Экран а также Навигатор , это помогает нам настроить каждый экран компонента, как показано ниже.

export default function AuthStack() {
  return (
    
      
      
    
  );
}

Куча. Навигатор принимает те значения PROP, которые являются общими для каждого маршрута экрана. Например, как правило, навигатор стека добавляет заголовок к каждому экрану внутри него. Для текущего стека вам не потребуется заголовок на каждом экране. Таким образом, настройка Headermode к значению Нет выполняет это.

Headermode Опора указывает, как следует отображать заголовок для каждого экрана в стеке. Установка на Нет , указывает, что его вообще не следует отображать. Вы можете найти другие значения для этого режима Здесь Анкет

начальный размер это название маршрута для рендеринга при первой нагрузке навигатора.

Вы можете узнать больше навигатора стека и его общих свойств в посте Здесь Анкет

Чтобы сделать навигацию между входом в систему, чтобы зарегистрироваться на экране, вы должны добавить навигация Опора для каждого компонента. Перейти к Loginscreen.js Подайте и передайте навигация Ссылка на опору в качестве параметра.

export default function LoginScreen({ navigation }) {
  // ...
}

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

Например, в компоненте экрана входа, чтобы перейти на экран регистрации, добавьте нанесение Опора до последнего Formbutton Анкет navigation.navigate принимает значение экрана для перемещения, с текущего экрана.

 navigation.navigate('Signup')}
/>

Точно так же Open Signupscreen.js Файл экрана и передайте ссылку на предложение для навигация Анкет

export default function SignupScreen({ navigation }) {
  // ...
}

Далее добавьте нанесение Опора в Iconbutton .

 navigation.goBack()}
/>

goback () Действие закрывает активный экран (экран регистрации) и перемещается обратно в стек (экран входа в систему).

Для получения дополнительной информации о навигация Опора, проверьте официальную ссылку Здесь Анкет

Добавить контейнер навигации

Оба наших компонента экрана теперь настроены для работы на навигации. В этом разделе давайте добавим недостающую часть под названием NavigationContainer Чтобы убедиться, что текущая навигация в стеке AUTH работает.

Создайте новый файл с именем Routes.js Внутри SRC/Navigation/ каталог. Этот файл будет содержать все стеки, которые будет иметь приложение, но сейчас стек Auth.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AuthStack from './AuthStack';

export default function Routes() {
  return (
    
      
    
  );
}

NavigationContainer это компонент, который управляет деревом навигации. Это также позволяет компонентам экрана относиться к навигация Опора. Это делается путем завершения всей структуры навигатора.

Обертывание с провайдером бумаги

Создайте файл с именем index.js Внутри SRC/навигация/ каталог.

Сделать компоненты пользовательского интерфейса из React-Cnive-Paper Чтобы работать, вы должны обернуть все маршруты внутри PaperProvider как показано ниже.

import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import Routes from './Routes';

/**
 * Wrap all providers here
 */

export default function Providers() {
  return (
    
      
    
  );
}

PaperProvider Компонент предоставляет тему всем компонентам в рамках. Он также выступает в качестве портала для компонентов, которые необходимо отображать на верхнем уровне.

Это обязательный шаг. Причина создания отдельного Поставщики Компонент и упаковка Маршруты и не обернуть Приложение Компонент (как упоминалось в официальных документах Здесь ) заключается в том, что в этом приложении будут некоторые пользовательские провайдеры. Таким образом, чтобы управлять всеми поставщиками, лучше, если вы создадите отдельный файл.

Вывод

Форма компонентов экрана теперь завершена. Чтобы убедиться, что они работают по желанию, откройте окно терминала и создайте приложение для конкретной мобильной платформы.

# for ios
npx react-native run-ios

# for android
npx react-native run-android

Затем перейдите к симулятору, и вы получите следующий результат.

Что дальше?

В первой части этой серии учебных пособий вы успешно создали навигационный поток, используя библиотеку React-Navigation, создали навигатор стека и узнали, как использовать предварительно определенные компоненты пользовательского интерфейса из React-Navtive Paper для создания повторного использования Пользовательские компоненты.

В следующей части этой серии мы узнаем, как установить SDK Firebase, как генерировать и добавить учетные данные Firebase и клавиши API для приложений для iOS, реализовать поставщика регистрации по электронной почте с Firebase и, таким образом, используйте навигационный поток с сервисом в реальном времени.

Вы можете найти полный исходный код для этого проекта в Это GitHub Repo Анкет

👉 Вот список ресурсов, используемых в этом уроке.

• Узнайте больше о Ссылка на навигацию
• Размеры API в React Native
• Начало работы с Stack Navigator с помощью React-Navigation v5 здесь

💙 Чтобы узнать больше о RACE Native, ознакомьтесь с этими ресурсами:

• Официальная документация
• Моя личная рассылка

Первоначально опубликовано в Стук сердца. Фриц. Ai Анкет

Оригинал: “https://dev.to/amanhimself/chat-app-with-react-native-1-build-reusable-ui-form-elements-using-react-native-paper-1h4j”