rn navio下載-RN rn navio源代碼下載

rn navio

其他源碼

v0.1.0

下載

Navio

Navio是一個導航庫，用於建立在React Navigation之上的React Native。主要目標是通過在一個地方構建應用程序佈局，並利用打字稿提供自動完成和其他功能來改善DX。

Navio可讓您輕鬆創建不同類型的應用程序：基於底部選項卡，簡單的單屏和帶抽屜佈局的應用程序。它需要為導航器，屏幕，堆棧，標籤和抽屜下方的所有樣板代碼配置，因此您可以專注於開發應用程序的業務邏輯。

如果Navio在某種程度上為您提供了幫助，請使用

Navio仍然是一個年輕的圖書館，未來可能會發生破壞。查看Navio是否準備生產

Quickstart

安裝依賴項

紗添加RN-NAVIO

反應導航依賴性

由於Navio是在React Navigation頂部構建的，因此您需要安裝以下庫：

紗線添加 @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer/drawer

有關更多信息，請檢查安裝步驟。

創建您的第一個Navio佈局

此代碼將在一個屏幕上構建一個簡單的應用程序。

 // app.tsximport {text}來自'react-native'; import {navio}來自'rn-navio'; const home =（）=> {
  返回<text>主頁</text>;}; const navio = navio.build（{
  屏幕：{home}，
  堆棧：{homestack：['home']，
  }，，
  root：'stacks.homestack'，}）; export default（）=> <navio.app />;

帶有2個選項卡的基於選項卡的應用

// app.tsximport {text}來自'react-native'; import {navio}來自'rn-navio'; const home =（）=> {
  返回<text>主頁</text>;}; const settings =（）=> {
  返回<text>設置頁</text>;}; const navio = navio.build（{{
  屏幕：{home，設置}，
  堆棧：{homestack：['home']，settingsStack：['settings']，
  }，，
  TABS：{apptabs：{layout：{hometab：{stack：'homestack'}，setterstab：{stack：'settingsstack'}，}，}，}，}，
  }，，
  root：'tabs.apptabs'，}）; export default（）=> <navio.app />;

如果您想看到更多複雜和異國情調的例子，請按照此鏈接。

操場

反應本地起動器

您可以使用Expo-Starter的Navio引導一個新項目：

 NPX CLI-RN新應用

博覽會小吃

在博覽會小吃中與圖書館一起玩。

導航API

Navio提供了在應用程序中執行導航的操作。假設，您有一個navio對象：

常見的

.N
反應導航當前導航對象。您可以執行任何這些動作。
.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)
從選項卡中設置一個新的應用程序root。

抽屜

抽屜相關的動作。

.drawers.open()
用於打開抽屜窗格。
.drawers.close()
用於關閉抽屜窗格。
.drawers.toggle()
用於打開抽屜窗格（如果關閉），或者在打開時關閉。
.drawers.jumpTo(name)
用於跳到抽屜導航器中的現有路線。
.drawers.updateOptions(name, options)
更新給定抽屜菜單內容的選項。用於更改其標題。
.drawers.setRoot(name)
從抽屜中設置一個新的應用程序根。

模態

模式相關的動作。

.modals.show(name, params)
用於顯示現有模態並傳遞參數。
.modals.getParams(name)
在.show（）方法上傳遞的模態返回參數。

鉤子

有用的鉤子。

.useN()
React導航的useNavigation()掛鉤的重複。用於方便內部屏幕以訪問導航對象。文件.
.useR()
來自React Navigation的useRoute()掛鉤的重複。用於方便屏幕內部以訪問路由對象。文件
.useParams()
用於快速訪問導航路由參數。傳遞參數時用於方便屏幕內部。

佈局結構

Navio需要screens和至少一個stacks來構建應用程序佈局。 tabs ， drawers ， modals ， root ， hooks和defaultOptions是可選的，用於更高級的應用程序佈局。

螢幕

這些是Navio的應用程序的主要磚。您可以將它們重複使用您要構建的任何堆棧。

可以通過傳遞普通的反應組件來定義屏幕。如果您想通過一些描述屏幕的選項，則也可以通過對象。

例子

import {screet1，screen3}來自'@app/screens'; const navio = navio.build（{{
  屏幕：{一個：screen1，二：（）=> {return <> </>;}三：{component：component：screet3，options ：（ props）=>（{title：'trite：'trix hone'} ）}
  }，}）;

堆棧

堆棧是使用以前已定義的Screens構建的。 IDE應該有助於自動完成，以獲得更好的DX。

可以通過傳遞Screens數組來定義堆棧。如果您想將一些選項傳遞給堆棧導航器，則可以傳遞對象。

例子

const navio = navio.build（{{
  //屏幕是從上一步取出的
  堆棧：{mainstack：['一個'，'二']，exkplestack：{屏幕：['三']，navigatorProps：{screetlisteners：{focus：{）=> {}，}，}，}，}，} ，}，，，
  }，}）;

選項卡

標籤是使用以前已定義的Screens ， Stacks和Drawers構建的。

可以通過傳遞帶有content的對象和導航器的道具來定義選項卡。

內容可以作為Stacks ， Drawers ， Screens數組或描述底部選項卡的堆棧和選項的對象（描述標題，圖標等）。

例子

const navio = navio.build（{{
  //屏幕和堆棧是從上一步中獲取的
  TABS：{apptabs：{layout：{naverab：{stack：['一個''，'二']，//或抽屜：'someDrawer'，options：（）=>（） }，exigpletab：{stack：' exkplestack'，//或抽屜：'someDrawer'，options：（）=>（{title：'example'，}），}，}，options：{...}， / / /可選navigatorProps：{. ..}，//可選}，
  }，}）;

抽屜

抽屜是使用以前已定義的Screens ， Stacks和Tabs構建的。

可以通過傳遞帶有content對像以及可選為導航器的道具來定義抽屜。

內容可以作為Stacks ， Tabs ， Screens數組或描述底部選項卡的堆棧和選項的對象（描述標題，圖標等）。

例子

const navio = navio.build（{{
  //屏幕和堆棧是從上一步中獲取的
  抽屜：{maindrawer：{layout：{main：'mainstack'，示例：'exkplestack'，playground：['一個''，'二'，'三']，}，options：{...}，//可選NavigatorProps：{...}，//可選}，
  }，}）;

模態

模式是使用以前已定義的Screens和Stacks構建的。您可以在使用該應用程序時在任何時間點顯示/顯示它們。

可以通過傳遞Screens數組或Stacks名稱來定義模態。

例子

const navio = navio.build（{{
  //屏幕和堆棧是從上一步中獲取的
  模態：{examplemodal：{stack：'exkplestack'，選項：{...}，// optional}，
  }，}）;

根

這是應用程序的根名稱。它可以是Stacks ， Tabs或Drawers之一。

您可以通過navio.setRoot('drawers', 'AppDrawer')或通過更改<navio.App /> component的initialRouteName來更改應用程序的根。

例子

const navio = navio.build（{{
  //堆棧，標籤和抽屜取自以前的示例
  root：'tabs.apptabs'，//或'stacks.mainstack'或'drawers.AppDrawer'}）;

鉤子

將在每個生成的Stacks ， Tabs或Drawers導航器上運行的掛鉤列表。對於暗模式或語言更改有用。

例子

const navio = navio.build（{{
  鉤子：[usetranslation]，}）;

默認選項

默認選項將根據每個Stacks的s， Tabs的s， Drawer或Modal屏幕以及應用程序中生成的容器。

Note所有容器和Tabs和Drawer的屏幕選項都有headerShown: false情況下（為了隱藏不必要的導航標頭）。您始終可以更改它們，如果您在隱藏選項卡時（推新Stack ）時要擁有一個本機< Back按鈕，這可能很有用。

例子

const navio = navio.build（{{
  defaultOptions：{stacks：{屏幕：{headerShadowVisible：false，headertIntColor：colors.primary，}，容器：{headershown：true，}，}，tabs：{屏幕：屏幕：tabdefaultOptions，}
  }，}）;

應用程式

定義佈局後，Navio生成了應用程序的根組件。它可用於將其直接傳遞給registerRootComponent()或與額外的提供商包裝，或在應用程序啟動之前添加更多邏輯。

 const navio = navio.build（{...}）; export default（）=> <navio.app />

您可以通過navio.setRoot('drawers', 'AppDrawer')或更改<navio.App /> component的initialRouteName更改應用程序的詞根。

常見問題解答

將參數傳遞到模態

這是最常見的問題（在這裡，這里和這裡）。在下面，您可以找到兩個解決方案：

使用React導航對象的舊方法

//使用.navigate React Navigation對象的方法並通過paramsnavio.n.navigate（'mymodal'，{屏幕：'screenname'，params：{userId：'someid'}}）; // //在screenConconst屏幕上訪問params = （）=> {
  const {userId} = navio.useparams（）;};

Navio `v0.1.+`的新方法

//使用.modals.modals.show方法，並通過paramsnavio.modals.show（'mymodal'，{userId：'someid'}）; // //在screenConst screen =（）=> {
  const {userId} = navio.modals.getParams（'mymodal'）;};

博覽會路由器，Navio和React導航有什麼區別？

EXPO ROUTER是一個路由庫，旨在使用Expo使用Expo的通用反應本機應用程序。它在基於文件的路由系統上運行，對於希望使用單個代碼庫為本機（iOS和Android）和Web平台創建應用程序的開發人員來說，它是一個絕佳的選擇。

另一方面，Navio採用了靜態配置方法，類似於React Native Navigation中看到的佈局構建方法。 Navio主要針對本機平台（iOS和Android），更少強調Web兼容性優化。在Navio中，應用程序佈局在單個文件中配置。

兩個庫都建立在React導航的頂部，並且可以與之結合使用。這意味著所有掛鉤，動作，深層連接功能以及React導航的其他功能都將與兩者無縫搭配。值得注意的是，React Navigation引入了V7中的靜態配置（尚未發布）。

Navio生產準備好了嗎？

Navio對於Buddy Marketplace（iOS應用程序）至關重要，幫助我們在短短2-3個月內將其推出。它在該應用程序中每天都在獲得用戶，並且需要快速獲得新功能，這使我們可以更多地專注於創建有價值的業務邏輯，而不是處理基本的設置任務。

但是，Navio仍然是一個年輕的圖書館，缺乏某些功能，例如無縫的深連接集成，這對於其在生產應用程序中的全部有效性很重要。由於它是實時應用程序的一部分，因此我計劃定期更新它，並添加新功能。您可以通過檢查未來計劃部分來查看即將發生的事情。

如果您在應用程序中使用Navio，我很想听聽您的消息，如果您要尋找其他功能。

未來計劃

Navio最初是一個實驗性（和有點奇怪的）項目，旨在使用React Navigation最大程度地減少APP佈局中的重複代碼。我喜歡靜態配置的概念，其中整個應用程序佈局設置都被凝結到一個文件中。在世博啟動器中實施並收到積極的反饋之後，我決定將其集成到Active Mobile應用程序中。我想將其他功能集成到Navio中。最令人興奮的目標之一是將反應導航合併並反應本機導航功能為統一的API，從而進一步簡化了開發過程。