React Naviation Library를 시작합니다

이 기사는 복잡한 React Native 앱을위한 고성능 내비게이션 라이브러리 인 React Navigation을 탐색합니다. JavaScript 스레드에 의존하는 React Navigation과 달리 기본 내비게이션은 더 부드러운 내비게이션을 위해 기본 구성 요소를 활용하며, 특히 복잡한 UIS가있는 앱에 유리합니다.

주요 장점 :

기본 구성 요소 활용을 통한 복잡한 UI에 대한 우수한 성능 화면 간 데이터 전송의 효율적인 처리, 성능 병목 현상 최소화.

전제 조건 :

React 및 React Native에 대한 친숙 함이 가정됩니다. 노드, 원사 및 반응 기본 개발 환경 ( 사용)이 필요합니다. .

앱 구조 : 이 자습서는로드, 로그인, 비밀번호 잊어 버린 암호, 홈, 갤러리 및 피드의 5 가지 화면이있는 샘플 앱을 구축합니다. 로드 된 화면은 로그인 한 사용자를 확인하여 홈 화면 (탭 탐색을 통해) 또는 로그인 화면으로 지시합니다. 로그인 화면 (Mocked Authentication)을 사용하면 홈, 갤러리 및 피드 화면에 액세스 할 수 있으며, 비밀번호 잊어 버린 비밀번호 화면은 스택 탐색을 보여줍니다. 갤러리와 피드 스크린은 기본 UI 요소를 보여주는 자리 표시 자입니다.

설정 단계 :
• 프로젝트 생성 :
종속성 설치 :

기본 모듈 링크 :

이것은 React Native 버전에 따라 다릅니다. 0.60 버전의 경우 rnn의 경우 , Asyncstorage의 경우 및 벡터 아이콘의 수동 링크를 사용하십시오 (자세한 지침은 라이브러리 문서 참조). 이전 버전에는 가 필요합니다. Android는 Multidex 구성 ()

구성 :

로 구성 요소를 등록하고 . 코드 하이라이트 :

튜토리얼은 , 및 를 사용하여 내비게이션에 중점을 둔 각 화면의 구현에 대해 자세히 설명합니다. 를 통해 화면 사이에 데이터를 전달하고 하단 탭 탐색 () 및 스택 내비게이션 ()을 사용합니다. 벡터 아이콘은 탭 막대에 통합되어 있습니다 문제 해결 :

일반적인 문제에는 고유 모듈 연결 문제와 Android의 Multidex 한계가 포함됩니다. 솔루션 및 추가 디버깅 전략이 제공됩니다

추가 탐사 : 튜토리얼은 애니메이션 사용자 정의, 측면 메뉴 구현 및 다른 내비게이션 라이브러리와의 비교를 탐색하는 것을 제안합니다. 전체 소스 코드는 github에서 사용할 수 있습니다

자주 묻는 질문 (faqs) :

FAQS 섹션은 React Navigation 및 React Navigation, 설정 절차, 데이터 및 소품 통과, 딥 링크, 내비게이션 바 사용자 정의, 화면 전환 및 탭 및 서랍 내비게이션의 주요 차이점을 다룹니다.

위 내용은 React Naviation Library를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!