Как создать поток аутентификации с помощью React Navigation v5
24 марта 2022 г.обложка от Darius Foroux
Из-за недавнего обновления в интерактивной навигации произошли некоторые серьезные изменения, и вместе с этим некоторые заметные изменения могут быть внесены в поток аутентификации.
«Ваш лучший учитель — ваша последняя ошибка» — Ральф Нейдер
Обязательное условие
В этом уроке я предполагаю, что у вас есть базовые знания о React Native, React Navigation и Expo. В случае каких-либо сомнений или если вам нужно подробное руководство, спросите в комментариях.😎
Обзор
В этом уроке я создам два экрана: экран регистрации и экран входа. Я сосредоточусь только на аспекте дизайна и навигации и не буду вдаваться в подробности того, как подключить его к базе данных и аутентифицировать, если вам, ребята, нужно знать, просто спросите в комментариях. Итак, хватит болтовни и давайте начнем.🏎
Подход
Примечание. Я использую нативные элементы, чтобы ускорить процесс проектирования.
Установите необходимые файлы с помощью npm
- Используйте выставку для создания проекта
```javascript
Инициализация выставки "имя_приложения"
- Установка реагирующей навигации и ее зависимостей
```javascript
npm установить @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
- Я использую навигатор стека для экранов входа и регистрации и навигатор нижних вкладок для основной части приложения. Нам нужно отдельно установить стек и навигатор вкладок перед их использованием.
```javascript
npm install @react-navigation/bottom-tabsnpm install @react-navigation/stack
- Установите реагирующие нативные элементы
```javascript
npm установить реагирующие нативные элементы
Структура проекта
Поскольку React Native — это компоненты и их повторное использование, давайте создадим два компонента AuthForm и NavLink. AuthForm удобен для предоставления общего пользовательского интерфейса, так как экран входа и регистрации в значительной степени идентичен. NavLink помогает дать нижнюю ссылку на любую из страниц. Компонент разделителя используется для обеспечения равномерного пространства между каждым представлением или текстовыми элементами.
Spacer.js
импортировать React из «реагировать»;
импортировать { View, StyleSheet } из "реактивного";
const Spacer = ({ дочерние элементы }) => {
return
константные стили = StyleSheet.create({
разделитель: {
поле: 15,
экспортировать разделитель по умолчанию;
AuthForm.js
Примечание: AuthForm вызывается с 4 свойствами, эти свойства помогают изменить этот компонент на экране (например, вход или регистрация). То, что делает каждое из этих свойств, в значительной степени очевидно из их названий.
- headerText => показывает страницу регистрации или страницу регистрации в зависимости от контекста.
- errorMessage => показывает ошибку и станет более полезным при использовании API и запросов к базе данных.
- onSubmit => использует адрес электронной почты и пароль для выполнения действия отправки.
- submitButtonText => соответствующим образом изменяет название кнопки (например, вход или регистрация).
```javascript
импортировать React, {useState} из «реагировать»;
импортировать { StyleSheet } из "реагировать-родной";
импортировать {Текст, Кнопка, Ввод} из "реагировать-родные-элементы";
импортировать разделитель из "./спейсер";
const AuthForm = ({headerText, errorMessage, onSubmit, submitButtonText }) => {
const [электронная почта, setEmail] = useState("");
const [пароль, setPassword] = useState("");
вернуть (
<Разделитель>
<Текст h3>{headerText}
<Ввод
метка = "Электронная почта"
значение = {электронная почта}
onChangeText={setEmail}
autoCapitalize="нет"
автозамена = {ложь}
<Пробел />
<Ввод
SecureTextEntry
метка = "Пароль"
значение = {пароль}
onChangeText={setPassword}
autoCapitalize="нет"
автозамена = {ложь}
{сообщение об ошибке ? (
) : нулевой}
<Разделитель>
<Кнопка
title={submitButtonText}
onPress={() => onSubmit({ адрес электронной почты, пароль })}
константные стили = StyleSheet.create({
сообщение об ошибке: {
размер шрифта: 16,
красный цвет",
полеСлева: 15,
полеВерх: 15,
экспортировать AuthForm по умолчанию;
NavLink.js
Используется для смены экрана между экраном регистрации и экраном входа.
Примечание: Здесь я использовал useNavigation из реагирующей навигации для переключения между экранами. Обратите внимание, что этот метод работает только в глубоко вложенных дочерних элементах, которые здесь удовлетворяются. NavLink требует два параметра: text и routeName.
text => используется для отображения определенного текста.
routeName => это имя маршрута, указанное в файле App.js.
импортировать React из «реагировать»;
импортировать { Text, StyleSheet, TouchableOpacity } из "реагировать-нативный";
импортировать разделитель из "./спейсер";
импортировать {useNavigation} из "@react-navigation/native";
const NavLink = ({ text, routeName }) => {
константная навигация = useNavigation();
вернуть (
<Разделитель>
<текстовый стиль={styles.link}>{текст}
константные стили = StyleSheet.create({
связь: {
цвет синий",
экспорт NavLink по умолчанию;
SigninScreen.js
Примечание: Не забудьте импортировать AuthForm и NavLink и указать все параметры.
импортировать React из «реагировать»;
импортировать { View, StyleSheet, Text } из «реагировать на родной»;
импортировать AuthForm из "../components/AuthForm";
импортировать NavLink из "../components/NavLink";
const SigninScreen = () => {
вернуть (
<Вид стиля={styles.container}>
<Аутформа
headerText="Войдите в свою учетную запись"
сообщение об ошибке=""
onSubmit={() => {}}
submitButtonText="Войти"
<NavLink
text="У вас нет учетной записи? Вместо этого зарегистрируйтесь"
routeName="Регистрация"
константные стили = StyleSheet.create({
контейнер: {
гибкий: 1,
justifyContent: "по центру",
полеВнизу: 200,
экспортировать SigninScreen по умолчанию;
SignupScreen.js
Примечание: Не забудьте импортировать AuthForm и NavLink и указать все параметры.
импортировать React, {useContext} из «реагировать»;
импортировать { View, StyleSheet } из "реактивного";
импортировать {Контекст как AuthContext} из "../context/AuthContext";
импортировать AuthForm из "../components/AuthForm";
импортировать NavLink из "../components/NavLink";
const SignupScreen = ({навигация}) => {
const {состояние, регистрация} = useContext (AuthContext);
вернуть (
<Вид стиля={styles.container}>
<Аутформа
headerText="Зарегистрируйтесь в Трекере"
errorMessage={state.errorMessage}
submitButtonText="Зарегистрироваться"
onSubmit={регистрация}
<NavLink
routeName="Вход"
text="У вас уже есть учетная запись? Войдите вместо нее!"
константные стили = StyleSheet.create({
контейнер: {
гибкий: 1,
justifyContent: "по центру",
полеВнизу: 200,
экспортировать SignupScreen по умолчанию;
App.js
Примечание: Если вы посмотрите в функции приложения, вы увидите, что для флага isLoggedIn установлено значение true. используйте JWT (веб-токен json), чтобы убедиться, что пользователь вошел в систему.
импортировать React, {useContext} из «реагировать»;
импортировать { NavigationContainer } из "@react-navigation/native";
импортировать { createStackNavigator } из "@react-navigation/stack";
импортировать { createBottomTabNavigator } из "@react-navigation/bottom-tabs";
импортировать SigninScreen из "./src/screens/SigninScreen";
импортировать SignupScreen из "./src/screens/SignupScreen";
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
функция mainFlow() {
вернуть (
<Вкладка.Навигатор>
Компонент
приложение функции () {
константа isLoggedIn = истина;
вернуть (
<Контейнер навигации>
<Навигатор стека>
{Вошел в систему? (
<Стек.Экран
имя="Регистрация"
компонент = {SignupScreen}
options={{ headerShown: false }}
<Стек.Экран
имя="Войти"
компонент = {SigninScreen}
options={{ headerShown: false }}
<Стек.Экран
имя = «основной поток»
компонент = {основной поток}
options={{ headerShown: false }}
экспортировать приложение по умолчанию;
Большое спасибо за то, что читаете, лайкаете и комментируете мои статьи. пожалуйста, подумайте о том, чтобы следовать за мной. ура 😊
👉🏼 зайдите на мой сайт milindsoorya.com, чтобы узнать больше об обновлениях и связаться с нами. ваше здоровье.
Вам также может понравиться: -
- [Анализ и классификация наборов данных грибов в python] (https://milindsoorya.com/blog/mushroom-dataset-analysis-and-classification-python)
- [Как настроить Jupyter Notebook с Python 3 в Ubuntu 20.04] (https://milindsoorya.com/blog/how-to-Set-up-jupyter-notebook-with-python-3-on-ubuntu-20.04)
- [Как использовать виртуальную среду Python с conda] (https://www.milindsoorya.com/blog/how-to-use-virtual-environment-with-conda)
- [Создайте классификатор спама на python] (https://www.milindsoorya.com/blog/build-a-spam-classifier-in-python)
- [Подключение чат-бота Rasa к веб-сайту — пошаговое руководство] (https://www.milindsoorya.com/blog/connecting-rasa-to-a-website-a-step-by-step-tutorial)
Оригинал