rn navio
v0.1.0
Navio是一个导航库，用于建立在React Navigation之上的React Native。主要目标是通过在一个地方构建应用程序布局，并利用打字稿提供自动完成和其他功能来改善DX。
Navio可让您轻松创建不同类型的应用程序：基于底部选项卡，简单的单屏和带抽屉布局的应用程序。它需要为导航器，屏幕，堆栈，标签和抽屉下方的所有样板代码配置，因此您可以专注于开发应用程序的业务逻辑。
如果
Navio在某种程度上为您提供了帮助，请使用
Navio仍然是一个年轻的图书馆，未来可能会发生破坏。查看Navio是否准备生产
纱添加RN-NAVIO
由于Navio是在React Navigation顶部构建的，因此您需要安装以下库：
纱线添加 @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer/drawer
有关更多信息，请检查安装步骤。
此代码将在一个屏幕上构建一个简单的应用程序。
// 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 />;// 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新应用
在博览会小吃中与图书馆一起玩。
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：（）=>（） }，evippletab：{stack：'exkplestack'，//或抽屉：'SomeDrawer'，options：（）=>（{title：'example' }），}，}，选项：{...}，//可选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更改应用程序的词根。
这是最常见的问题（在这里，这里和这里）。在下面，您可以找到两个解决方案：
//使用.navigate React Navigation对象的方法并通过paramsnavio.n.navigate（'mymodal'，{屏幕：'screenname'，params：{userId：'someid'}}）; // //在screenConconst屏幕上访问params = （）=> {
const {userId} = navio.useparams（）;};v0.1.+的新方法//使用.modals.modals.show方法，并通过paramsnavio.modals.show（'mymodal'，{userId：'someid'}）; // //在screenConst screen =（）=> {
const {userId} = navio.modals.getParams（'mymodal'）;};EXPO ROUTER是一个路由库，旨在使用Expo使用Expo的通用反应本机应用程序。它在基于文件的路由系统上运行，对于希望使用单个代码库为本机（iOS和Android）和Web平台创建应用程序的开发人员来说，它是一个绝佳的选择。
另一方面，Navio采用了静态配置方法，类似于React Native Navigation中看到的布局构建方法。 Navio主要针对本机平台（iOS和Android），更少强调Web兼容性优化。在Navio中，应用程序布局在单个文件中配置。
两个库都建立在React导航的顶部，并且可以与之结合使用。这意味着所有挂钩，动作，深层连接功能以及React导航的其他功能都将与两者无缝搭配。值得注意的是，React Navigation引入了V7中的静态配置（尚未发布）。
Navio对于Buddy Marketplace（iOS应用程序）至关重要，帮助我们在短短2-3个月内将其推出。它在该应用程序中每天都在获得用户，并且需要快速获得新功能，这使我们可以更多地专注于创建有价值的业务逻辑，而不是处理基本的设置任务。
但是，Navio仍然是一个年轻的图书馆，缺乏某些功能，例如无缝的深连接集成，这对于其在生产应用程序中的全部有效性很重要。由于它是实时应用程序的一部分，因此我计划定期更新它，并添加新功能。您可以通过检查未来计划部分来查看即将发生的事情。
如果您在应用程序中使用Navio，我很想听听您的消息，如果您要寻找其他功能。
Navio最初是一个实验性（和有点奇怪的）项目，旨在使用React Navigation最大程度地减少APP布局中的重复代码。我喜欢静态配置的概念，其中整个应用程序布局设置都被凝结到一个文件中。在世博启动器中实施并收到积极的反馈之后，我决定将其集成到Active Mobile应用程序中。我想将其他功能集成到Navio中。最令人兴奋的目标之一是将反应导航合并并反应本机导航功能为统一的API，从而进一步简化了开发过程。
我仍然想在库中添加一些东西：
.updateOptions()特定标签和抽屉。
标签可以放置在抽屉内，反之亦然。
将道具传递给模态。
通过提供链接到屏幕的linking来使深链接更容易。问题。
通过添加RNN和RNN屏幕来制作Navio Universal。
扩展Navio的功能和应用程序布局。
简单地将Navio与React Navigation集成（例如Navio.stack（））
打字稿问题 @ index.tsx文件。
随时为任何建议打开问题。
该项目是MIT许可的
