단순하고 예측 가능한 탐색으로 React 네이티브 앱 빌드
React Native 세계에는
react-navigation 및 react-native-navigation 의 두 가지 주요 탐색 라이브러리가 있습니다. 둘 다 커뮤니티에서 널리 사용됩니다.RNN Screens는 그것들을 대체하는 것이 아니라 훌륭한 추가 기능입니다. 후드 아래에서 React Native Navigation API를 사용하고 있으며 추가 작업이나 쓰기 유형 없이 자동 화면 등록 및 화면 이름 자동 완성으로 탐색을 보다 단순화하고 예측 가능하게 만듭니다.
TL;DR
아래에서는 React Native CLI을 사용하여 기본 React Native 앱을 초기화하고 필요한 라이브러리를 추가할 것입니다. 그런 다음 탐색 상태를 구성하고 두 구성 요소를 빌드한 다음 이들 사이에 푸시/표시/팝을 만듭니다.
직접 가지고 놀고 싶다면 Github repo을 확인하고
example/ 폴더에서 예제를 실행하십시오.부트스트랩 React 네이티브 앱
기본 React Native 앱을 생성하기 위해 CLI의 init 명령을 사용할 것입니다. 터미널을 열고 원하는 폴더로 이동한 후 다음 명령을 실행합니다.
> npx react-native init RNNScreensExample --template react-native-template-typescript
> cd RNNScreensExample
이 과정은 다소 시간이 걸릴 수 있습니다. 완료되면 디렉터리를 프로젝트로 변경하고 원하는 편집기에서 엽니다.
라이브러리 설치
rnn-screens와 react-native-navigation의 API가 RNN 화면에서 사용되므로 추가해야 합니다.> yarn add react-native-navigation rnn-screens
> npx rnn-link # linking RNN
> npx pod-install # installing pods
React Native Navigation을 설치하는 데 문제가 있는 경우 자세한 내용detailed tutorial을 따르십시오.
탐색 설정
모든 설치 단계를 완료했으므로 이제 일부 코드 작성을 시작할 시간입니다.
index.js를 열고 다음과 같이 변경합니다.registerRootComponent 함수는 전체 앱의 진입점입니다. React Native와 Expo에서 비슷한 기능을 볼 수 있었습니다.
다음 단계는 Main 및 Settings 두 가지 구성 요소를 만드는 것입니다. 탐색 작업의 예를 보여주기 위해 Settings에서 Main 화면을 푸시합니다. 간단하게 유지하기 위해 App.tsx 파일을 수정합니다. 생성된 코드를 삭제하고 아래 코드를 붙여넣어야 합니다.
<script id="gist-ltag"src="https://gist.github.com/kanzitelli/10ad1dfd69e969db0dfcdd870afc3422.js"/>
보시다시피 screens 버튼 다음에 push() 화면과 pop() 화면에 onPress 변수를 사용하고 있습니다. 다음 단계는 각 화면의 모양(탐색 옵션)을 정의하고screens 설명하는 것입니다. App.tsx 파일 끝에 코드를 추가해야 합니다.
<script id="gist-ltag"src="https://gist.github.com/kanzitelli/785bc612cc5dafd3f24de37a47fa8a5f.js"/>
순수한 React Native Navigation API로 탐색 상태를 설명하면 길고 장황한 스파게티 코드가 생성될 수 있습니다. 이것이 한 곳에서는 화면의 옵션을 설명하고 다른 곳에서는 응용 프로그램 루트를 설명하는 것이 필수인 이유입니다. 예를 들어 탭 기반 앱을 만들고 싶다면 다음과 같이 쉽게 할 수 있습니다.
<script id="gist-ltag"src="https://gist.github.com/kanzitelli/db9b0ba7fd7f9d96a8afed52b9f42a74.js"/>
앱 실행
React Native CLI로 앱을 실행할 시간입니다!
> npx react-native run-ios # or
> npx react-native run-android
앱 실행에 문제가 있는 경우 더보기detailed tutorial를 따르세요.
<시간/>
이것은 실험적인 라이브러리입니다. 그러나 이 접근 방식은 RNN Starter에 도입되었으며 첫 번째 버전부터 성공을 보여주었습니다.
질문이나 제안 사항이 있으시면 언제든지 연락주세요!
| https://github.com/kanzitelli
Reference
이 문제에 관하여(단순하고 예측 가능한 탐색으로 React 네이티브 앱 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kanzitelli/build-react-native-apps-with-simplified-and-predictable-navigation-5b3j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
