React Native Navigation by Wix
Wix의 네이티브 탐색 (V2) 반응 — 시작하기
수행원
2018 년 7 월 27 일 · 읽기 7 분
"); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">React Native Navigation으로 React Native 앱을 빌드하는 첫 번째 방법 .이 프로젝트의 최종 코드를 보려면 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기를 클릭 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">하십시오 .Wix는 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">최근 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">React Native Navigation 라이브러리 의 안정적인 버전 2를 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">출시 했습니다 .
React Native Navigation은 JavaScript 기반 구현이 아니라 기본 탐색 구현입니다. 이는 일반적으로 라이브러리가 기본 구현이 아닌 다른 솔루션보다 성능이 우수하고 원활한 상호 작용 및 화면 전환을 제공함을 의미합니다.버전 2 또는 React Native Navigation은 라이브러리를 다시 작성 하여 초기 릴리스에서 발생한 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">일부 문제 를 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">해결 합니다.
이 자습서에서는 실제 인증 흐름을 작성하고 AsyncStorage를 사용하여 인증 상태를 시뮬레이션하여 선택한 인증 공급자 로 대체 할 수있는 방법을 보여줍니다 .
인증 흐름을 데모로 사용하여 얻은 가치는 스택 및 탭 기반 탐색 과 함께 작동하는 React Native Navigation API의 상당히 넓은 표면을 살펴 보고 해결 방법도 볼 수 있다는 것입니다. 애플리케이션 구축시 실제 문제 : 사용자 인증 고려 사항에 대한 탐색 구조화.
흐름의 작동 방식 :
애플리케이션이로드되면 스토리지에 사용 가능한 사용자가 있는지 확인하면서 초기 초기화 구성 요소를 렌더링합니다 .
저장소에 사용자가있는 경우 스택 기반 내비게이션에서 홈 경로를 렌더링합니다 .
저장소에 사용자가없는 경우 인증 기반 구성 요소 ( SignIn & SignUp )를 탭 기반 탐색으로 렌더링합니다 .
2 부 시리즈 중 1 부입니다.
제 1 부 - 사용하기위한 더미 권한을 가진 엔드 - 투 - 엔드 탐색 및 인증 흐름을 만들기 어떤 인증 제공자를.2 부 — "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">Amazon Cognito를 사용하여 더미 인증을 실제 인증으로 교체 .
시작하기
시작하려면 먼저 React Native CLI를 사용하여 새로운 React Native 프로젝트를 만들어야합니다.
반응 네이티브 초기화 RNNav2
다음으로 npm 또는 yarn을 사용하여 React Native Navigation을 설치합니다.
npm react-native-navigation @ alpha # 설치 또는 얀 추가 react-native-navigation @ alpha
이제 네이티브 의존성을 연결하고 네이티브 코드를 추가해야합니다.iOS 통합 방법에 대한 자세한 내용을 보려면 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기를 클릭 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">하십시오 .Android 통합 방법에 대한 자세한 내용을 보려면 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기를 클릭 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">하십시오 .
파일 만들기
다음으로이 앱에 필요한 파일을 만듭니다.
src
루트 디렉토리에 모든 것을 담을 폴더를
만들어 봅시다
:
mkdir src
다음으로
src
디렉토리에
다음 파일을 작성해 봅시다
:
cd src touch config.js Home.js Initializing.js SignIn.js SignUp.js screens.js navigation.js Screen2.js
config.js
—이 파일은 앱의 기본 구성을 유지합니다.이 경우에는 스토리지에서 사용자를 검색하기위한 AsyncStorage 키가됩니다.
Home.js
—이 파일에는 사용자가 로그인 한 경우 렌더링되는 구성 요소가 포함됩니다.
Initializing.js
—이 파일은 초기화 로직을 유지하며 앱이로드 중이라는 메시지를 사용자에게 표시합니다.
Signin.js / SignUp.js
— 여기에는 로그인 및 가입 양식이 있습니다.
SignIn.js
로그인 한 사용자를 홈 화면으로 리디렉션합니다.
screens.js
—이 파일은 React Native Navigation의 화면 구성을 유지합니다.
navigation.js
—이 파일에는 탐색 기능이 포함됩니다.
goToAuth()
&
는 두 가지 주요 기능이 있습니다
goHome()
.
Screen2.js
— 스택 탐색을 시연하기 위해 홈 화면에서 탐색 할 수있는 다른 구성 요소 만 보유합니다.
화면 등록
React Native Navigation을 사용하면 앱에서 사용할 각 화면을 등록해야합니다.
이를 위해
registerComponent
React Native Navigation
의
방법을
사용합니다
.
초기화하려는 모든 화면을 단일 함수로 배치하고 탐색 루트를 만들기 전에 함수를 호출합니다.
여기에서
Navigation.registerComponent()
내비게이션에 사용할 구성 요소
를 호출하는 함수를 작성하고 내 보냅니다
.
앱 등록
다음으로
index.js
애플리케이션의 시작 탐색 스택을 설정 및 초기화하도록
업데이트
합니다.
여기에서
registerScreens
함수를
가져 와서
호출합니다.
또한
Navigation.setRoot
애플리케이션을 렌더링하려는 초기 경로를 전달하여을
호출하여 앱의 초기 루트 스택을 설정했습니다
.
우리의 경우 루트는
Initializing
화면
의 단일 구성 요소
입니다.
네비게이션 기능 만들기
이제 앱 내에서 루트 라우트 스택을 설정하는 데 사용할 수있는 재사용 가능한 함수 몇 개를 만들어 보겠습니다.
루트 경로는 원래 경로 스택을 정의하는 것입니다. 사용자가 로그인 한 경우 권한 부여가 실제 앱 자체를 라우팅하도록 루트 스택을 재설정하는 옵션이 필요합니다.
탭에 필요한 이미지는 다음과 같습니다. 저장하고 사용하십시오.
signIn.png
가입하기.png
에서
navigation.js
두 가지 기능이 있습니다 :
goToAuth
—이 기능은 루트 경로 스택을
bottomTabs
경로 구성으로 설정합니다.
각 탭은 이름과 일부 옵션이 구성된 구성 요소입니다.
goHome
— 이렇게하면 경로 스택이
stack
탐색으로
설정되어
단일 구성 요소가 자식 배열 인 구성 요소로 전달됩니다
Home
.
구성 파일에 AsyncStorage 키 저장
AsyncStorage에서 사용자가 로그인했는지 확인하고 여러 파일에서 로그인하는지 확인합니다. AsyncStorage 키를 별도의 파일에 저장하여 쉽게 재사용 할 수 있습니다.
스크린 만들기
이제 필요한 모든 탐색 구성을 만들었습니다. 사용할 화면 및 구성 요소를 만들어 보겠습니다.
Initializing.js.
Initializing.js
Initializing.js —를 살펴보면
componentDidMount
여기에서 진행중인 작업의 대부분을 볼 수 있습니다.
우리는 AsyncStorage를 검사하여 사용자가 저장소에 저장했는지 확인하고, 그렇다면
Home
화면을로드하고
Auth
경로를
로드하지 않으면
(
SignIn
&
SignUp
)
로드합니다
.
componentDidMount
사용자가 저장소에 저장되어 있는지 확인하기 위해 논리를 실행하는
동안
로딩 메시지가 표시됩니다.
그런 다음 사용자 존재 여부에 따라 경로 스택을 재설정합니다.
Home.js
Home.js — 여기서는 기본 메시지를 사용자에게 렌더링하고 다른 경로로 로그 아웃하거나 탐색 할 수있는 옵션을 제공합니다.
내가 주목할만한 차이점은 탐색 방법을 호출하는 방법입니다. 이전 버전 (
this.props.navigator.push
)
과 같은 소품을 사용하는 대신
Navigation
API를
가져 와서
호출
Navigation.push
합니다.
정적
get options()
클래스 함수
도 알 수
있습니다.
네비게이터 모양에 스타일 및 속성을 추가하기 위해 화면에 구성 요소 정의를 추가 할 수 있습니다.
우리는 방금
topBar
title 속성을
부여
했습니다.
Screen2.js
Screen.js — 홈 화면에서 스택 탐색기로 탐색하는 경우에만 표시되는 기본 화면입니다. 주목해야 할 것은 Navigation.pop 함수를 호출하여 되돌아가는 방법입니다. 이것은 props (
this.props.navigator.pop
)
를 사용한
V2
Navigation
와 React Native Navigation (
Navigation.pop
)
에서
가져온
API
를 사용하는 이전 API와 다시 다릅니다
.
SignUp.js
SignUp.js — 현재로서는 SignUp.js는 자리 표시 자 가입 양식 일뿐입니다. 이를 사용하여 사용중인 인증 서비스를 구현할 수 있습니다. 2 부에서는 AWS Amplify & Amazon Cognito를 사용하여 실제 가입 양식으로 업데이트 할 예정입니다.
SignIn.js
SignIn.js —이 구성 요소는 기본 로그인 양식을 보유합니다. 에서
signIn
클래스 메소드 우리의 이름 속성을 설정하여 성공적인 기호를 시뮬레이션
AsyncStorage
및 (가) 홈 화면에 사용자를 탐색.
이제 앱을 실행할 수 있어야합니다.
반응 네이티브 실행 iOS
# 또는
반응 네이티브 실행 안드로이드
여기까지이 프로젝트의 최종 코드는 여기에 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">있습니다 .이 학습서의 2 부를 보려면 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">여기를 클릭 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">하십시오 .
