[펌]ReactNative ReactNavigation
We dive into React Navigation and explore how to create apps with tab, stack, drawer navigators, and combinations thereof.
원본 url : https://levelup.gitconnected.com/react-native-react-navigation-e691873a5b6c
마지막 포스트에서 React Native를 살펴보고 첫 번째 앱을 만들었습니다. 오늘은 네비게이터를 사용하여 단일 화면에서 다중 화면 응용 프로그램으로갑니다.
네비게이터 란 무엇입니까?
네비게이터를 사용하면 애플리케이션 구조를 정의 할 수 있습니다. 경로 및 장면 (또는이 경우 화면)을 사용하여 응용 프로그램이 사용자에게 표시되는 방식을 설정합니다. 네비게이터는 또한 헤더 및 탭 막대와 같은 공통 요소를 렌더링합니다.
반응 탐색
응용 프로그램의 네비게이터를 선택할 때 선택할 수있는 옵션이 많이 있습니다. 이 기사에서는 React Navigation에 중점을 둘 것입니다. Android 및 iOS의 기본 탐색 구성 요소와 함께 작동하는 React Native 커뮤니티가 지원하는 솔루션입니다.
React Navigation은 React Native 프레임 워크의 "한 번 배우고 어디서나 쓸 수있는"방법론과 일관성을 유지합니다. 유쾌하게 사용하기도 쉽습니다.
내장 네비게이터
React Navigation에는 StackNavigator, TabNavigator 및 DrawerNavigator의 세 가지 탐색기가 내장되어 있습니다. 예제를 통해 각각 살펴보고 중첩을 통해 결합하는 방법을 살펴 보겠습니다. 먼저 새로운 응용 프로그램을 설정합시다.
터미널 창을 열고이 새 앱을 설치할 위치로 이동하십시오. 일단 React Native CLI를 호출하여“ReactNav”라는 새 애플리케이션을 설정하십시오.
반응 네이티브 초기화
프로젝트가 설정되면 프로젝트 폴더로 이동하십시오. NPM (Node Package Manager)을 호출하여 최신 버전의 React Navigation을 설치하십시오.
npm install-저장 반응 탐색
이제 새 애플리케이션이 초기화되고 React Navigation이 설치되었습니다. 들어가기 전에 코드를 iOS와 Android 모두에 사용할 수 있도록 몇 가지 수정을 해 봅시다.
애플리케이션의 "index.ios.js"및 "index.android.js"파일을 엽니 다. 내용을 다음과 같이 변경하십시오.
다음으로“index.ios.js”및“index.android.js”파일과 같은 폴더에“App.js”파일을 생성해야합니다. 그 안에 응용 프로그램의 코드를 작성합니다. 다음을 자리 표시 자로 추가하십시오.
동일한 폴더에 "Styles.js"라는 파일을 만들어 응용 프로그램의 스타일 시트를 보관하겠습니다. “Styles.js”파일에 다음을 추가하십시오.
응용 프로그램을 새로 고치면 중앙에 "Hello World"가 표시된 간단한 응용 프로그램이 있어야합니다.
스크린
화면은 애플리케이션에서 별도의보기를 정의하는 React 구성 요소입니다. 색상을 구별하기 위해 색상을 사용하여 몇 가지를 설정해 봅시다. “App.js”파일에 다음을 추가하십시오.
실제로 색상을 지정하려면“Styles.js”파일의 스타일 목록에 다음을 추가하십시오.
큰. 이를 통해 녹색, 빨간색, 파란색 및 자주색의 네 가지 화면이 설정되었습니다. 탐색을 추가하겠습니다.
스택 탐색기
React Navigation에 포함 된 StackNavigator부터 시작하겠습니다. 이 네비게이터는 기존 화면 위에 새 화면이 배치되는 화면 간 전환 방법을 제공합니다. 스택에있는 카드처럼.
이 스타일의 탐색에 익숙 할 것입니다. iOS와 Android에서 상당히 일반적입니다. iOS에서는 새 화면이 오른쪽에서 미끄러 져 들어가고 Android에서는 화면이 아래쪽에서 사라집니다. 사용해 봅시다.
먼저 반응 탐색 패키지에서 StackNavigator 구성 요소를 가져옵니다. 애플리케이션에서 "App.js"파일을 열고 가져 오기 목록에 다음을 추가하십시오.
이제 PurpleScreen 컴포넌트와 AppRegistry 사이에 다음을 추가하여 StackNavigator 인스턴스를 호출합니다.
그런 다음 ReactNav 클래스를 수정하여 새 StackNav 함수를 렌더링하십시오.
우리가 한 일은 화면이 탐색 트리 내에 경로로 등록 된 StackNavigator입니다. GreenScreen은 "Green"경로 등의 "screen"으로 설정됩니다. 응용 프로그램을 새로 고치면 회색 머리글이있는 녹색 화면이 나타납니다.
헤더에 제목을 추가합시다. 이를 위해 GreenScreen 클래스의 탐색 옵션을 호출합니다. 이렇게하려면 클래스 내에서 정적 메서드를 호출하십시오.
다른 화면에도 비슷한 제목을 추가하십시오. 새로 고침하면 회색 헤더와 '녹색'이라는 제목의 녹색 화면이 나타납니다. 훌륭합니다. 이제 다른 화면에 대한 링크를 추가하겠습니다.
녹색 화면이 방문 페이지가되도록 설정하겠습니다. 거기에서 버튼이 빨간색 화면으로 이어집니다.
TouchableHighlight를 추가하여이 작업을 수행합니다. TouchableHighlight 내에서 "onPress"메소드는 "this.props.navigation.navigate ( 'Red')"를 호출하여 빨간색 화면을로드하는 데 사용되는 도우미 메소드를 호출합니다.
“App.js”를 열고 반응 가능한 가져 오기 목록에 TouchableHighlight를 추가 한 다음 GreenScreen 클래스의 렌더링 메소드에 TouchableHighlight를 추가하십시오.
또한 "Styles.js"의 스타일 목록에 "버튼"항목을 추가하십시오.
앱을 새로 고침하고 사용해보십시오. 버튼을 누르면 빨간색 화면이 나타납니다. 또한 빨간색 화면 헤더 왼쪽에 버튼을 추가하여 녹색 화면으로 돌아갑니다. 기본 StackNavigation이지만 그다지 많지 않습니다. 그것을 바꾸자.
빨간색 화면을 약간 수정하겠습니다. 새 화면에는 기본보기에서 녹색 화면으로 돌아가는 버튼과 머리글에서 파란색과 보라색 화면을 여는 터치 가능한 개체가 있습니다. 먼저 리턴 버튼입니다. “App.js”를 열고 TouchableHighlight를 RedScreen 클래스에 추가하십시오.
추가 된 버튼은 "onPress"메서드에서 "this.props.navigation.goBack ()"을 사용하며 StackNavigator에 내장 된 도우미입니다. "goBack ()"은 호출되면 활성 화면을 닫고 탐색 목록에서 경로를 뒤로 이동합니다. 간단하고 효과적입니다.
버튼을 추가하는 것 외에도 RedScreen 클래스에서 "static navigationOptions"를 제거했습니다. 정적 선언 내에서 다른 화면으로 이동하기 위해 소품에 직접 액세스 할 수 없기 때문에이 작업을 수행합니다. 대신 클래스 자체에 "navigationOptions"를 별도로 정의하겠습니다.
headerRight 및 headerLeft 요소는 각각 헤더의 오른쪽과 왼쪽에 표시되는 항목을 정의합니다. 이 경우 보라색 및 파란색 화면으로 이동하는 방법이있는 버튼이 추가되었습니다. 또한 앱이 실행되도록 react-native 가져 오기 목록에“Button”을 추가하십시오.
앱을 새로 고치고 필요에 따라 버튼과 뒤로 방법을 사용하여 다른 화면을 탐색하십시오. 이제 스택 탐색이 설정된 앱과 탐색 링크가 포함 된 사용자 지정 헤더가 있습니다.StackNavigator 구성 요소로 더 많은 작업을 수행 할 수 있으며 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">설명서를 더 자세히 살펴 보는 것이 좋습니다 .
탭 네비게이터
시작하려면 TabNavigator 구성 요소를 반응 탐색 가져 오기 목록에 추가하십시오.
그런 다음 const 함수“TabNav”에서 TabNavigator를 호출하고 StackNavigator와 마찬가지로 경로를 설정하십시오. 스타일링을위한 "tabBarOptions"를 관리하기위한 약간의 추가 코드가 있습니다.
그런 다음 ReactNav 클래스의 render 메소드에서“StackNav”를“TabNav”로 바꾸십시오. 앱을 새로 고치면 StackNavigator와 동일한 경로를 사용하여 TabNavigator가 표시되어야합니다. "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">설명서에 자세히 설명 된대로 TabNavigator를 수정하는 다양한 옵션이 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">있습니다 . 다시 한 번 확인하고 TabNavigator로 그에 따라 놀아 보는 것이 좋습니다.
서랍 네비게이터
이전과 마찬가지로 DrawerNavigator를 반응 탐색 가져 오기 목록에 추가합니다. </ p>
그런 다음 const 함수“DrawerNav”를 사용하여 DrawerNavigator가 호출되고 다른 두 탐색기와 마찬가지로 경로가 설정됩니다.
그런 다음 ReactNav 클래스의 render 메소드에서“TabNav”를“DrawerNav”로 교체하십시오.
이 시점에서 앱을 새로 고치면 헤더가없는 녹색 화면이 나타납니다. 화면 상 버튼을 사용하면 이전과 같이 빨간색 화면으로 이동하지만 그게 전부입니다. 빨간색 화면에도 헤더가 없습니다. DrawerNavigator는 자동으로 렌더링하지 않습니다.
또한 다른 두 화면 (파란색 및 자주색)으로 이동할 수있는 방법이 없습니다. 서랍을 탐색에 사용하려면 서랍을 열 수있는 방법이 필요합니다.
이렇게하려면 헬퍼 메소드 "props.navigation.navigate ( 'openDrawer')"를 호출하는 "onPress"메소드를 사용하여 각 컬러 화면에 TouchableHighlights를 추가하십시오. 이제 앱을 새로 고치고 DrawerNavigator를 사용해보십시오. 다른 네비게이터와 마찬가지로, DrawerNavigator와 그 내용을 사용자 정의하기위한 많은 옵션이 있습니다. 자세한 내용은 "); background-size: 1px 1px; background-position: 0px calc(1em + 1px);">공식 문서 를 참조하십시오.
네비게이터 결합 / 네 스팅
각 네비게이터는 자체적으로 유용하지만 일반적으로 앱에서 내비게이션을 처리 할 때 몇 가지 네비게이터를 결합해야합니다. 중첩을 통해이를 수행하는 방법을 살펴 보겠습니다.
이 예제에서는 이와 같이 작동하도록 응용 프로그램을 설정합니다. 녹색 화면은 "랜딩 / 로그인"화면이됩니다. 응용 프로그램의 "홈 로그인"역할을하는 빨간색 / 파란색 화면으로 이동하는 버튼이 있습니다. 여기에서 탭을 사용하여 파란색 화면과 빨간색 화면을 전환 할 수 있습니다. 차례로 두 가지 모두 빨간색 / 파란색 화면과 자주색 화면을 탐색 할 수있는 서랍 탐색기를 "앱 메뉴"로 여는 버튼이 있습니다.
이렇게하려면 먼저 네비게이터를 보유 할“NestedNav”라는 새 const를 선언하십시오. 녹색 화면의 초기 경로와 파란색 / 빨간색 화면으로 이동하는 기능을 설정하려면 StackNavigator 구성 요소를 사용하여 시작하십시오. 이 탐색기에서는 초기 경로를 정상적으로 선언하지만 "Drawer"라는 두 번째 경로에는 DrawerNavigator 메서드가 포함됩니다.
DrawerNavigator 안에“홈”경로를 TabNavigator가 될 화면에 추가하십시오. 이 탭 탐색기에는 "Red"(RedScreen) 및 "Blue"(BlueScreen)에 대한 경로가 있습니다. 또한 탭 레이블을 이전처럼 선명하게하기 위해 몇 가지 형식 지정 옵션도 포함합니다.
TabNavigator를 닫고 자주색 네비게이터에 "보라색"경로를 추가하여 자주색 화면에 액세스하십시오.
그런 다음 GreenScreen 및 RedScreen의 Touchable Highlights를 수정하여 새 라우팅을 반영하고 녹색 화면에서“Open Drawer”버튼을 놓습니다.
이제 ReactNav 클래스에서 "NestedNav"를 사용하여 "DrawerNav"를 전환하십시오. </ p>
앱을 새로 고침하고 놀아보세요. 이제 세 가지 유형의 탐색이 하나에 포함 된 앱이 생겼습니다.
고마워요! 지금은 여기까지입니다. 더 많은 개발 튜토리얼, 팁 및 요령을 보려면 다음에 우리와 함께하십시오.
