React Navigation v5를 사용한 인증 흐름

Darius Foroux의 표지 이미지

반응 탐색의 최근 업데이트로 인해 일부 주요 변경 사항이 발생했으며 이를 통해 인증 흐름에 몇 가지 주목할만한 변경 사항이 적용될 수 있습니다.

“ Your best teacher is your last mistake ” — Ralph Nader

전제 조건

이 튜토리얼에서는 반응 네이티브, 반응 탐색 및 엑스포에 대한 기본적인 이해가 있다고 가정합니다. 궁금한 점이 있거나 심도 있는 튜토리얼이 필요하면 댓글로 문의하세요.😎

개요

이 튜토리얼에서는 두 개의 화면, 즉 가입 화면과 로그인 화면을 만들 것입니다. 나는 디자인 측면과 탐색에만 초점을 맞출 것이며 데이터베이스에 연결하고 인증하는 방법에 대해서는 자세히 설명하지 않을 것입니다. 여러분이 알아야 할 사항이 있으면 댓글로 물어보십시오. 잡담은 그만하고 시작하겠습니다.🏎

접근하다

Note : I am using react native elements to speed up the design process.

npm을 사용하여 필요한 파일을 설치합니다.

expo를 사용하여 프로젝트 생성

Expo init "_appName"_

반응 탐색 및 해당 종속성 설치

npm install @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

로그인 및 등록 화면에 스택 탐색기를 사용하고 앱의 주요 부분에 하단 탭 탐색기를 사용하고 있습니다. 스택과 탭 네비게이터를 사용하기 전에 별도로 설치해야 합니다.

npm install @react-navigation/bottom-tabs  
npm install @react-navigation/stack

Note: In the old version of react navigation a switch navigator was usually used to switch between signin and signup screens. React navigation now recommends using stack navigator in place of that. For more info read this 👉 upgrading from v4.

react 기본 요소 설치

npm install react-**native**-elements

프로젝트 구조

반응 네이티브는 구성 요소와 재사용에 관한 것이므로 AuthForm과 NavLink라는 두 가지 구성 요소를 만들어 보겠습니다. AuthForm은 로그인과 가입 화면이 거의 동일하기 때문에 공통 UI를 제공하는 데 유용합니다. NavLink는 페이지 중 하나에 대한 하단 링크를 제공하는 데 도움이 됩니다. 스페이서 구성 요소는 각 보기 또는 텍스트 요소 사이에 균일한 공간을 제공하는 데 사용됩니다.

Spacer.js

import React from "react";

import { View, StyleSheet } from "react-native";

const Spacer = ({ children }) => {

return <View style={styles.spacer}>{children}</View>;

};

const styles = StyleSheet.create({

spacer: {

margin: 15,

},

});

export default Spacer;

AuthForm.js

참고 사항: AuthForm은 4개의 속성으로 호출되며, 이러한 속성은 이 구성 요소를 화면에 수정하는 데 도움이 됩니다(예: 로그인 또는 가입). 이러한 각 속성이 수행하는 작업은 이름에서 거의 분명합니다.

headerText => 컨텍스트에 따라 가입 페이지 또는 로그인 페이지를 표시합니다.

errorMessage => 오류를 표시하며 API 및 데이터베이스 요청을 사용할 때 더 유용해집니다.

onSubmit => 이메일과 암호를 사용하여 제출 작업을 수행합니다.

submitButtonText => 그에 따라 버튼 이름을 변경합니다(예: 로그인 또는 가입).

import React, { useState } from "react";

import { StyleSheet } from "react-native";

import { Text, Button, Input } from "react-native-elements";

import Spacer from "./Spacer";

const AuthForm = ({ headerText, errorMessage, onSubmit, submitButtonText }) => {

const [email, setEmail] = useState("");

const [password, setPassword] = useState("");

return (

<>

<Spacer>

<Text h3>{headerText}</Text>

</Spacer>

<Input

label="Email"

value={email}

onChangeText={setEmail}

autoCapitalize="none"

autoCorrect={false}

/>

<Spacer />

<Input

secureTextEntry

label="Password"

value={password}

onChangeText={setPassword}

autoCapitalize="none"

autoCorrect={false}

/>

{errorMessage ? (

<Text style={styles.errorMessage}>{errorMessage}</Text>

) : null}

<Spacer>

<Button

title={submitButtonText}

onPress={() => onSubmit({ email, password })}

/>

</Spacer>

</>

);

};

const styles = StyleSheet.create({

errorMessage: {

fontSize: 16,

color: "red",

marginLeft: 15,

marginTop: 15,

},

});

export default AuthForm;

NavLink.js

회원가입 화면과 로그인 화면 사이에 있는 화면을 변경할 때 사용합니다.



참고 사항: 여기에서는 반응 탐색의 useNavigation을 사용하여 화면 사이를 전환했습니다. 이 방법은 여기에서 만족하는 깊게 중첩된 자식에서만 작동합니다. NavLink에는 text와 routeName이라는 두 가지 매개변수가 필요합니다.

text => 특정 텍스트를 표시하는 데 사용됩니다.

routeName => App.js 파일에 지정된 경로의 이름입니다.

import React from "react";

import { Text, StyleSheet, TouchableOpacity } from "react-native";

import Spacer from "./Spacer";

import { useNavigation } from "@react-navigation/native";

const NavLink = ({ text, routeName }) => {

const navigation = useNavigation();

return (

<TouchableOpacity onPress={() => navigation.navigate(routeName)}>

<Spacer>

<Text style={styles.link}>{text}</Text>

</Spacer>

</TouchableOpacity>

);

};

const styles = StyleSheet.create({

link: {

color: "blue",

},

});

export default NavLink;

SigninScreen.js

참고 사항: AuthForm 및 NavLink를 가져오고 모든 매개변수를 제공하는 것을 잊지 마십시오.

import React from "react";

import { View, StyleSheet, Text } from "react-native";

import AuthForm from "../components/AuthForm";

import NavLink from "../components/NavLink";

const SigninScreen = () => {

return (

<View style={styles.container}>

<AuthForm

headerText="Sign In to your Acoount"

errorMessage=""

onSubmit={() => {}}

submitButtonText="Sign In"

/>

<NavLink

text="Dont have an account? Sign up instead"

routeName="Signup"

/>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",

marginBottom: 200,

},

});

export default SigninScreen;

SignupScreen.js

참고 사항: AuthForm 및 NavLink를 가져오고 모든 매개변수를 제공하는 것을 잊지 마십시오.

import React, { useContext } from "react";

import { View, StyleSheet } from "react-native";

import { Context as AuthContext } from "../context/AuthContext";

import AuthForm from "../components/AuthForm";

import NavLink from "../components/NavLink";

const SignupScreen = ({ navigation }) => {

const { state, signup } = useContext(AuthContext);

return (

<View style={styles.container}>

<AuthForm

headerText="Sign Up for Tracker"

errorMessage={state.errorMessage}

submitButtonText="Sign Up"

onSubmit={signup}

/>

<NavLink

routeName="Signin"

text="Already Have an account? Sign in instead!"

/>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",

marginBottom: 200,

},

});

export default SignupScreen;

App.js

참고 사항: 앱 기능을 보면 isLoggedIn 플래그가 true로 설정된 것을 볼 수 있습니다. 반응 탐색은 이 접근 방식을 권장합니다. 이 플래그는 개발 단계에만 해당되며 최종 빌드에서는 JWT( json을 사용할 수 있습니다. 웹 토큰) 사용자가 로그인했는지 확인합니다.

import React, { useContext } from "react";

import { NavigationContainer } from "@react-navigation/native";

import { createStackNavigator } from "@react-navigation/stack";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import SigninScreen from "./src/screens/SigninScreen";

import SignupScreen from "./src/screens/SignupScreen";

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

function mainFlow() {

return (

<Tab.Navigator>

<Tab.Screen name="tab1" component={tab1} />

<Tab.Screen name="tab2" component={tab2} />

<Tab.Screen name="tab3" component={tab2} />

</Tab.Navigator>

);

}

function App() {

const isLoggedIn = true;

return (

<NavigationContainer>

<Stack.Navigator>

{isLoggedIn ? (

<>

<Stack.Screen

name="Signup"

component={SignupScreen}

options={{ headerShown: false }}

/>

<Stack.Screen

name="Signin"

component={SigninScreen}

options={{ headerShown: false }}

/>

</>

) : (

<Stack.Screen

name="mainFlow"

component={mainFlow}

options={{ headerShown: false }}

/>

)}

</Stack.Navigator>

</NavigationContainer>

);

}

export default App;

제 글을 읽어주시고, 좋아요를 눌러주시고, 댓글을 달아주셔서 정말 감사합니다. 나를 따르는 것을 고려하십시오. 건배 😊

👉🏼 더 많은 업데이트와 연락을 원하시면 제 웹사이트milindsoorya.com를 확인하세요. 건배.

당신은 또한 좋아할 수도 있습니다 :-

Mushroom dataset analysis and classification in python

How To Set Up Jupyter Notebook with Python 3 on Ubuntu 20.04

How to use python virtual environment with conda

Build a spam classifier in python

Connecting Rasa Chatbot to a website — A step by step tutorial