rn navio
v0.1.0
Navio는 React Navigation 위에 구축 된 React Native를위한 내비게이션 라이브러리입니다. 주요 목표는 한 곳에서 앱 레이아웃을 구축하고 TypeScript의 힘을 사용하여 자동 완성 및 기타 기능을 제공하여 DX를 개선하는 것입니다.
Navio를 사용하면 다른 종류의 앱 (하단 탭 기반, 간단한 단일 스크린 및 서랍 레이아웃이있는 앱을 쉽게 만들 수 있습니다. 네비게이터, 화면, 스택, 탭 및 서랍에 대한 모든 보일러 플레이트 코드 구성을 처리하여 앱의 비즈니스 로직을 개발하는 데 집중할 수 있습니다.
Navio당신을 어떤 식 으로든 도와 주면 닐로 지원합니다.
☣️ Navio는 여전히 젊은 도서관이며 미래에 변화를 일으킬 수 있습니다. Navio가 생산 준비가되었는지 확인하십시오
원사 add rn-navio
Navio는 React Navigation 위에 구축되므로 다음 라이브러리가 설치되어 있어야합니다.
원사 add @react-navigation/stack @react-navigation/avatile @react-navigation/avative-stack @react-navigation/bottom-tabs @react-navigation/drawer
자세한 내용은 설치 단계를 확인하십시오.
이 코드는 하나의 화면으로 간단한 앱을 구축합니다.
// 'react-native'에서 app.tsximport {text}; 'rn-navio'에서 {navio} import {navio}; const home = () => {
<text> 홈 페이지 </text>;}; const navio = navio.build ({
스크린 : {home},
스택 : {홈 스택 : [ '홈'],
},
루트 : 'stacks.homestack',}); Export default () => <navio.app />; // 'react-native'에서 app.tsximport {text}; 'rn-navio'에서 {navio} import {navio}; const home = () => {
<text> 홈 페이지 </text>;}; const settings = () => {
<text> 설정 페이지 </text>;}; const navio = navio.build ({{
스크린 : {home, settings},
스택 : {Homestack : [ 'home'], Settingsstack : [ 'settings'],
},
탭 : {apptabs : {layout : {hometab : {stack : 'homestack'}, settingstab : {stack : 'settingsstack'},},},
},
루트 : 'tabs.appTabs',}); 내보내기 default () => <navio.app />;더 복잡하고 이국적인 예를 보려면이 링크를 따르십시오.
Expo-Starter에서 Navio와 함께 새로운 프로젝트를 부트 스트랩 할 수 있습니다.
NPX CLI-RN 새로운 앱
엑스포 간식에서 도서관과 함께 연주하십시오.
Navio는 앱 내에서 내비게이션을 수행하기위한 동작을 제공합니다. navio 객체가 있다고 가정합니다.
.N
React Navigation의 현재 탐색 객체. 이러한 작업을 수행 할 수 있습니다.
.push(name, params?)
스택 위에 경로를 추가하고 앞으로 내리립니다.
.goBack()
역사상 이전 경로로 돌아갈 수 있습니다.
.setParams(name, params)
특정 경로에 대한 매개 변수를 업데이트 할 수 있습니다.
.setRoot(as, rootName)
새로운 앱 루트를 설정합니다. Stacks , Tabs 및 Drawers 사이를 전환하는 데 사용할 수 있습니다.
스택 관련 동작.
.stacks.push(name)
스택 위에 경로를 추가하고 앞으로 내리립니다. 탭 막대를 숨길 수 있습니다.
.stacks.pop(count?)
스택의 이전 화면으로 돌아갑니다.
.stacks.popToTop()
스택의 첫 번째 화면으로 돌아가 다른 모든 것을 무시합니다.
.stacks.setRoot(name)
스택에서 새로운 앱 루트를 설정합니다.
탭 관련 동작.
.tabs.jumpTo(name)
탭 네비게이터의 기존 경로로 점프하는 데 사용됩니다.
.tabs.updateOptions(name, options)
주어진 탭의 옵션을 업데이트합니다. 배지 카운트를 변경하는 데 사용됩니다.
.tabs.setRoot(name)
탭에서 새 앱 루트를 설정합니다.
서랍 관련 행동.
.drawers.open()
서랍 창을 열는 데 사용됩니다.
.drawers.close()
서랍 창을 닫는 데 사용됩니다.
.drawers.toggle()
닫은 경우 서랍 창을 열거나 열면 닫습니다.
.drawers.jumpTo(name)
서랍 네비게이터의 기존 경로로 점프하는 데 사용됩니다.
.drawers.updateOptions(name, options)
주어진 서랍 메뉴 컨텐츠에 대한 옵션을 업데이트합니다. 제목을 변경하는 데 사용됩니다.
.drawers.setRoot(name)
서랍에서 새로운 앱 루트를 설정합니다.
모달 관련 행동.
.modals.show(name, params)
기존 모달 및 패스 매개 변수를 보여주는 데 사용됩니다.
.modals.getParams(name)
.show () 메소드에서 modal에 전달 된 매개 변수를 반환합니다.
유용한 후크.
.useN()
React Navigation의 useNavigation() 후크 복제. 내비게이션 객체에 액세스하기 위해 내부의 편의성에 사용됩니다. 문서.
.useR()
React Navigation의 useRoute() 후크 복제. 노선 개체에 액세스하기 위해 화면 내부의 편의성에 사용됩니다. 문서
.useParams()
내비게이션 경로에 빠르게 액세스하는 데 사용됩니다. 매개 변수를 전달할 때 화면 내부의 편의성에 사용됩니다.
Navio는 앱 레이아웃을 구축하기 위해 screens 과 하나 이상의 stacks 필요합니다. tabs , drawers , modals , root , hooks 및 defaultOptions 선택 사항이며보다 고급 앱 레이아웃에 사용됩니다.
이것들은 Navio와 함께 앱의 주요 벽돌입니다. 빌드하려는 스택에 대해 재사용 할 수 있습니다.
일반 반응 구성 요소를 전달하여 화면을 정의 할 수 있습니다. 화면을 설명하는 몇 가지 옵션을 전달하려면 객체도 전달할 수 있습니다.
'@app/screens'에서 {screen1, screen3} 가져 오기; const navio = navio.build ({{
스크린 : {one : screen1, 2 : () => {return <> </>;} 3 : {구성 요소 : screen3, 옵션 : (props) => ({title : 'ThreeOne'})}
},}); 스택은 이전에 정의 된 Screens 사용하여 구축됩니다. IDE는 더 나은 DX를 위해 자동 완성을 도와야합니다.
스택은 다양한 Screens 전달하여 정의 할 수 있습니다. 몇 가지 옵션을 Navigator를 스택으로 전달하려면 객체를 전달할 수 있습니다.
const navio = navio.build ({
// 화면은 이전 단계에서 가져옵니다
스택 : {mainstack : [ 'one', 'two'], examplestack : {screens : [ 'Three'], NavigatorProps : {ScreenListeners : {focus : () => {},},},},},},
},}); 탭은 이전에 정의 된 Screens , Stacks 및 Drawers 사용하여 제작되었습니다.
탭은 content 있는 객체와 선택적으로 네비게이터 소품을 전달하여 정의 할 수 있습니다.
컨텐츠는 Stacks , Drawers , Screens 배열 또는 하단 탭의 스택 및 옵션을 설명하는 객체 중 하나를 값으로 취할 수 있습니다 (제목, 아이콘 등).
const navio = navio.build ({
// 스크린과 스택은 이전 단계에서 가져옵니다
탭 : {apptabs : {레이아웃 : {maintab : {stack : [ 'one', 'two'], // 서랍 : 'SomedRawer', 옵션 : () => ({title : 'main',}), }, exampletab : {stack : 'emabestack', // 또는 서랍 : 'Somedrawer', 옵션 : () => ({title : 'example', }),},}, 옵션 : {...}, // 옵션 NavigatorProps : {...}, // 옵션},
},}); 서랍은 이전에 정의 된 Screens , Stacks 및 Tabs 사용하여 제작되었습니다.
서랍은 content 과 선택적으로 네비게이터 소품이있는 객체를 전달하여 정의 할 수 있습니다.
컨텐츠는 Stacks , Tabs , Screens 배열 또는 하단 탭의 스택 및 옵션 (제목, 아이콘 등)을 설명하는 객체 중 하나를 값으로 취할 수 있습니다.
const navio = navio.build ({
// 스크린과 스택은 이전 단계에서 가져옵니다
서랍 : {MainDrawer : {Layout : {Main : 'MainStack', 예 : 'examplestack', Playground : [ 'One', 'Two', 'Three'], 옵션 : {...}, // 옵션 NavigatorProps : {...}, // 옵션},
},}); 모달은 이전에 정의 된 Screens 과 Stacks 사용하여 제작되었습니다. 앱을 사용하는 동안 언제라도 표시/발표 할 수 있습니다.
모달은 Screens 배열 또는 Stacks 이름을 전달하여 정의 할 수 있습니다.
const navio = navio.build ({
// 스크린과 스택은 이전 단계에서 가져옵니다
MODALS : {exampleModal : {stack : 'emabestack', 옵션 : {...}, // 옵션},
},}); 이것은 앱의 루트 이름입니다. Stacks , Tabs 또는 Drawers 중 하나 일 수 있습니다.
나중에 navio.setRoot('drawers', 'AppDrawer') 에 의해 앱의 루트를 변경하거나 <navio.App /> 구성 요소의 initialRouteName 변경하여 변경할 수 있습니다.
const navio = navio.build ({
// 스택, 탭 및 서랍은 이전 예제에서 가져옵니다.
루트 : 'tabs.appTabs', // 또는 'stacks.mainstack'또는 'drawers.appdrawer'}); 생성 된 각 Stacks , Tabs 또는 Drawers 네비게이터에서 실행되는 후크 목록. 어두운 모드 또는 언어 변화에 유용합니다.
const navio = navio.build ({
후크 : [USETRANSLATION],}); 각 Stacks , Tabs , Drawer 또는 Modal 의 화면 및 앱 내에서 생성 된 컨테이너에 따라 적용되는 기본 옵션.
Note 모든 컨테이너 및 Tabs 및 Drawer 스크린 옵션에는 headerShown: false (불필요한 탐색 헤더를 숨기려면). 탭을 숨길 때 (새 Stack 눌렀을 때) 기본 < Back 버튼을 사용하려는 경우 유용 할 수있는 경우 언제든지 변경할 수 있습니다.
const navio = navio.build ({
기본값 : {stacks : {screen : {HeadersHadowVisible : False, HeaderTintColor : Colors.primary,}, 컨테이너 : {Headershown : True,},}, Tabs : {Screen : TabdeFaultOptions,}, 서랍 : {screen : drawerDefaultOptions,},},}
},}); Navio는 레이아웃이 정의 된 후 앱의 루트 구성 요소를 생성합니다. registerRootComponent() 에게 직접 전달하거나 추가 제공 업체로 포장하거나 앱이 시작되기 전에 더 많은 논리를 추가하는 데 사용할 수 있습니다.
const navio = navio.build ({...}); Export default () => <navio.app /> navio.setRoot('drawers', 'AppDrawer') 에 의해 앱의 루트를 변경하거나 <navio.App /> 구성 요소의 initialRouteName 변경하여 변경할 수 있습니다.
이것은 가장 자주 묻는 질문입니다 (여기, 여기 및 여기). 아래에서 두 가지 솔루션을 찾을 수 있습니다.
// 반응 내비게이션 객체의 .Navigate 메소드를 사용하고 paramsnavio.n.navigate ( 'myModal', {screen : 'screename', params : {userId : 'someid'}}); // ScreenConst Screen =에서 매개 변수에 액세스하십시오. () => {
const {userid} = navio.useparams ();};v0.1.+ 를 사용한 새로운 접근법 // navio 및 passnavio.modals.show ( 'myModal', {userId : 'someId'}); // ScreenConst Screen = () => {access params에 액세스하십시오.
const {userid} = navio.modals.getParams ( 'myModal');};Expo Router는 Expo를 사용하여 Universal React 기본 응용 프로그램을 위해 설계된 라우팅 라이브러리입니다. 파일 기반 라우팅 시스템에서 작동하므로 단일 코드베이스를 사용하여 기본 (iOS 및 Android) 및 웹 플랫폼 모두에 대한 애플리케이션을 작성하려는 개발자에게 탁월한 선택이됩니다.
반면에 Navio는 React Naver Navigation에서 볼 수있는 레이아웃 빌딩 방법과 유사한 정적 구성 접근법을 채택합니다. Navio는 주로 웹 호환성 최적화에 중점을 둔 기본 플랫폼 (iOS 및 Android)을 대상으로합니다. Navio에서는 응용 프로그램 레이아웃이 단일 파일 내에서 구성됩니다.
두 라이브러리는 React Navigation 위에 구축되며 이와 함께 사용할 수 있습니다. 이는 모든 후크, 동작, 딥 링크 기능 및 React Navigation의 기타 기능이 둘 다 완벽하게 작동 할 것으로 예상됩니다. 특히, React Navigation은 V7에서 정적 구성을 도입합니다 (아직 출시되지 않은).
Navio는 Buddy Marketplace (iOS App)에 필수적이어서 2-3 개월 만에 출시 할 수 있도록 도와줍니다. 매일 사용자를 확보하고 새로운 기능이 빠르게 필요한 앱에서의 사용을 통해 기본 설정 작업을 처리하는 대신 귀중한 비즈니스 로직을 만드는 데 더 집중할 수 있습니다.
그러나 Navio는 여전히 젊은 도서관이며 Seamless Deep Linking Integration과 같은 일부 기능이 부족하여 프로덕션 앱의 전체 효율성에 중요합니다. 라이브 앱의 일부이므로 정기적으로 업데이트하여 새로운 기능을 추가 할 계획입니다. 향후 계획 섹션을 확인하여 무슨 일이 일어나고 있는지 알 수 있습니다.
앱에서 Navio를 사용하고 있다면 여러분의 의견을 듣고 싶습니다. 추가 기능이 있다면 찾고 있습니다.
Navio는 React Navigation을 사용하여 앱 레이아웃에서 반복적 인 코드를 최소화하기위한 실험 (및 약간 이상한) 프로젝트로 시작했습니다. 전체 앱 레이아웃 설정이 단일 파일로 응축되는 정적 구성 개념을 좋아합니다. 엑스포 스타터 내에서 구현하고 긍정적 인 피드백을받은 후 활성 모바일 앱에 통합하기로 결정했습니다. Navio에 통합하고 싶은 추가 기능이 있습니다. 가장 흥미로운 목표 중 하나는 React Navigation을 병합하고 기본 내비게이션 기능을 통합 API로 병합하여 개발 프로세스를 더욱 간소화하는 것입니다.
도서관에 추가하고 싶은 몇 가지가 여전히 있습니다.
.updateOptions() 특정 탭 및 서랍의 경우.
탭은 서랍 내부에 배치 할 수 있으며 그 반대도 마찬가지입니다.
소품을 모달로 전달합니다.
linking 소품을 화면에 제공하여 Deeplinking을 더 쉽게 만듭니다. 문제.
RNN 및 RNN-Screens를 추가하여 Navio를 보편적으로 만듭니다.
Navio 기능 및 앱 레이아웃을 확장하십시오.
React Navigation과 Navio의 쉬운 통합 (예 : Navio.stack ())
TypeScript 문제 @ index.tsx 파일.
모든 제안에 대한 문제를 자유롭게 열어주십시오.
이 프로젝트는 MIT 라이센스가 부여되었습니다
