rn navio
v0.1.0
Navio é uma biblioteca de navegação para o React Native, construído no topo da navegação React. O principal objetivo é melhorar o DX construindo o layout do aplicativo em um só lugar e usando o poder do TypeScript para fornecer conclusão automática e outros recursos.
O NAVIO permite criar facilmente diferentes tipos de aplicativos: Bottom Boled Based, tela simples simples e aplicativos com layouts de gavetas. Ele cuida de toda a configuração do código da caldeira para navegadores, telas, pilhas, guias e gavetas sob o capô, para que você possa se concentrar no desenvolvimento da lógica de negócios do seu aplicativo.
Se
Navioo ajudou de certa forma, apoie -o com ️
☣️ Navio ainda é uma biblioteca jovem e pode ter mudanças quebradas no futuro. Confira se Navio está pronto para produção
Fio Adicione RN-Navio
À medida que o Navio é construído sobre a navegação do React, você precisará instalar as seguintes bibliotecas:
YARN Add @react-navigigation/pilha @react-navigation/native @react-navigigation/native stack @react-navigation/bott-tabs @react-navigigation/gaveta
Para mais informações, verifique as etapas de instalação.
Este código criará um aplicativo simples com uma tela.
// app.tsximport {text} de 'react-native'; import {Navio} de 'rn-navio'; const home = () => {
Return <sext> Página inicial </sext>;}; const Navio = Navio.build ({
Telas: {home},
Stacks: {Homestack: ['Home'],
},
Raiz: 'Stacks.HomeStack',}); exportar padrão () => <Navio.app />; // app.tsximport {text} de 'react-native'; import {Navio} de 'rn-navio'; const home = () => {
Return <sext> Página inicial </sext>;}; const Settings = () => {
Return <ext> configurações página </sext>;}; const Navio = Navio.build ({
Telas: {home, Configurações},
Stacks: {Homestack: ['Home'], SettingSstack: ['Configurações'],
},
guias: {apptabs: {layout: {hometab: {pilha: 'Homestack'}, SettingStab: {pilha: 'SettingSstack'},},},
},
raiz: 'tabs.apptabs',}); export padrão () => <Navio.app />;Se você deseja ver um exemplo mais complexo e exótico, siga este link.
Você pode inicializar um novo projeto com o Navio da Expo-Starter:
NPX CLI-RN Novo aplicativo
Brinque com a biblioteca no lanche da Expo.
Navio fornece um colecivo de ações para executar a navegação dentro do aplicativo. Suponha que você tenha um objeto navio :
.N
Objeto de navegação atual da Navegação React. Você pode executar qualquer uma dessas ações.
.push(name, params?)
Adiciona uma rota na parte superior da pilha e navega para a frente.
.goBack()
Permite voltar à rota anterior da história.
.setParams(name, params)
Permite atualizar parâmetros para uma determinada rota.
.setRoot(as, rootName)
Define uma nova raiz do aplicativo. Pode ser usado para alternar entre Stacks , Tabs e Drawers .
Ações relacionadas a pilhas.
.stacks.push(name)
Adiciona uma rota na parte superior da pilha e navega para a frente. Ele pode ocultar a barra de guias.
.stacks.pop(count?)
Leva você de volta a uma tela anterior na pilha.
.stacks.popToTop()
Leva você de volta à primeira tela da pilha, descartando todos os outros.
.stacks.setRoot(name)
Define uma nova raiz de aplicativo das pilhas.
Ações relacionadas a guias.
.tabs.jumpTo(name)
Usado para pular para uma rota existente no navegador da guia.
.tabs.updateOptions(name, options)
Atualiza as opções para uma determinada guia. Usado para mudar a contagem de crachás.
.tabs.setRoot(name)
Define uma nova raiz de aplicativo nas guias.
Ações relacionadas a gavetas.
.drawers.open()
Usado para abrir o painel da gaveta.
.drawers.close()
Usado para fechar o painel da gaveta.
.drawers.toggle()
Usado para abrir o painel da gaveta se fechado ou fechar se abrir.
.drawers.jumpTo(name)
Costumava pular para uma rota existente no navegador da gaveta.
.drawers.updateOptions(name, options)
Atualiza as opções para um determinado conteúdo do menu da gaveta. Usado para mudar seu título.
.drawers.setRoot(name)
Define uma nova raiz de aplicativo das gavetas.
Ações relacionadas a modais.
.modals.show(name, params)
Usado para mostrar um modal existente e passa parâmetros.
.modals.getParams(name)
Retorna os parâmetros passados para o método modal .show ().
Ganchos úteis.
.useN()
Duplicado de useNavigation() gancho da navegação react. Usado para conveniência telas internas para obter acesso ao objeto de navegação. Documentos.
.useR()
Duplicado de useRoute() gancho da navegação react. Usado para conveniência nas telas internas para obter acesso para rotear o objeto. Documentos
.useParams()
Usado para acesso rápido aos parâmetros da rota de navegação. Usado para conveniência nas telas internas ao passar os parâmetros.
Navio requer screens e pelo menos uma stacks para criar um layout de aplicativo. tabs , drawers , modals , root , hooks e defaultOptions são opcionais e usados para layouts de aplicativos mais avançados.
Estes são os principais tijolos do seu aplicativo com o Navio. Você pode reutilizá -los para qualquer pilha que queira construir.
Uma tela pode ser definida passando um componente react simples. Se você deseja passar algumas opções que descrevem a tela, também pode passar por um objeto.
importar {screen1, screen3} de '@app/telas'; const Navio = Navio.build ({
Telas: {One: Screen1, dois: () => {return <> </>;} três: {componente: screen3, opções: (props) => ({title: 'threene'})}
},}); As pilhas são construídas usando Screens que foram definidas antes. O IDES deve ajudar na conclusão automática para melhor DX.
Uma pilha pode ser definida passando uma variedade de Screens . Se você deseja transmitir algumas opções para empilhar o Navigator, poderá passar por um objeto.
const Navio = Navio.build ({
// telas são tiradas da etapa anterior
Stacks: {Mainstack: ['One', 'Two'], ExampleStack: {Telas: ['Three'], NavigatorProps: {screnListeners: {focus: () => {},},},},
},}); As guias são construídas usando Screens , Stacks e Drawers que foram definidas antes.
As guias podem ser definidas passando um objeto com content e, opcionalmente, adereços para o navegador.
O conteúdo pode tomar como valor de Stacks , Drawers , matriz de Screens ou um objeto que descreve a pilha e as opções para a guia Inferior (descrevendo o título, o ícone etc.).
const Navio = Navio.build ({
// telas e pilhas são tomadas a partir da etapa anterior
guias: {apptabs: {layout: {manuten: {pilha: ['one', 'dois'], // ou gaveta: 'Somedrawer', opções: () => ({title: 'main',}), }, Exampletab: {pilha: 'ExampleStack', // ou gaveta: 'Somedrawer', Opções: () => ({Title: 'Exemplo', }),},}, opções: {...}, // NavigatorProps opcional: {...}, // opcional},
},}); As gavetas são construídas usando Screens , Stacks e Tabs que foram definidas antes.
As gavetas podem ser definidas passando um objeto com content e, opcionalmente, adereços para o navegador.
O conteúdo pode tomar como valor de Stacks , Tabs , matriz de Screens ou um objeto que descreve a pilha e as opções para a guia Inferior (descrevendo o título, o ícone etc.).
const Navio = Navio.build ({
// telas e pilhas são tomadas a partir da etapa anterior
Gavetas: {malandrawer: {layout: {main: 'mantanstack', exemplo: 'examlestack', playground: ['One', 'Two', 'Three'],}, opções: {...}, // opcional NavigatorProps: {...}, // opcional},
},}); Os modais são construídos usando Screens e Stacks que foram definidas antes. Você pode mostrá -los/apresentá -los a qualquer momento enquanto estiver usando o aplicativo.
Um modal pode ser definido passando uma variedade de Screens ou um nome de Stacks .
const Navio = Navio.build ({
// telas e pilhas são tomadas a partir da etapa anterior
Modais: {Exemplemodal: {pilha: 'ExemplateLe
},}); Este é um nome de raiz do aplicativo. Pode ser uma das Stacks , Tabs ou Drawers .
Você pode alterar a raiz do aplicativo posteriormente por navio.setRoot('drawers', 'AppDrawer') ou alterando initialRouteName do componente <navio.App /> .
const Navio = Navio.build ({
// pilhas, guias e gavetas são retiradas de exemplos anteriores
raiz: 'tabs.apptabs', // ou 'Stacks.mainstack' ou 'gavers.appdrawer'}); Lista de ganchos que serão executados em cada Stacks , Tabs ou Drawers geradas. Útil para o modo escuro ou mudança de idioma.
const Navio = Navio.build ({
ganchos: [USETRANSLATION],}); Opções padrão que serão aplicadas de acordo com as telas e contêineres de cada Stacks , Tabs , Drawer ou Modal gerados no aplicativo.
Note todas as opções de telas de contêineres e Tabs e da Drawer têm headerShown: false por padrão (para ocultar cabeçalhos de navegação desnecessários). Você sempre pode alterá -los, o que pode ser útil se desejar ter um botão < Back nativo ao esconder as guias (pressionando a nova Stack ).
const Navio = Navio.build ({
DefaultOptions: {Stacks: {Screen: {headerShadowVisible: false, headertIntColor: colors.Primary,}, contêiner: {headershown: true,},}, guias: {screen: tabdefaultOptions,}, gaveta: {Screen: drawerDofol
},}); Navio gera componente raiz para o aplicativo após a definição do layout. Ele pode ser usado para passá -lo diretamente para registerRootComponent() ou para envolver fornecedores extras ou adicionar mais lógica antes da inicialização do aplicativo.
const Navio = Navio.build ({...}); export default () => <Navio.app /> Você pode alterar a raiz do aplicativo por navio.setRoot('drawers', 'AppDrawer') ou alterando initialRouteName do <navio.App /> .
Isso é mais frequente pergunta (aqui, aqui e aqui). Abaixo, você pode encontrar duas soluções:
// use o método .navigate do objeto de navegação react e passa paramsnavio.n.navigate ('mymodal', {screen: 'screenname', params: {userId: 'someid'}}); // parâmetros de acesso em uma tela screenconSt = () => {
const {userID} = Navio.UseParams ();};v0.1.+ // use .modals.show Método de Navio e Pass Paramsnavio.modals.show ('MyModal', {userID: 'SomeId'}); // Acesse parâmetros em uma tela ScreencOnst = () => {
const {userID} = Navio.modals.getParams ('myModal');};O Expo Router é uma biblioteca de roteamento projetada para aplicativos nativos do React Universal usando a Expo. Ele opera em um sistema de roteamento baseado em arquivos, tornando-o uma excelente opção para desenvolvedores que desejam criar aplicativos para nativos (iOS e Android) e plataformas da Web usando uma única base de código.
Navio, por outro lado, adota uma abordagem de configuração estática, semelhante ao método de construção de layout observado na navegação nativa do React. Navio tem como alvo principalmente plataformas nativas (iOS e Android), com menos ênfase na otimização da compatibilidade da Web. No Navio, o layout do aplicativo está configurado em um único arquivo.
Ambas as bibliotecas são construídas sobre a navegação react e podem ser usadas em conjunto com ela. Isso significa que todos os ganchos, ações, recursos de vinculação profunda e outros recursos da Navegação React devem funcionar perfeitamente com ambos. Notavelmente, a Navegação React introduz a configuração estática no V7 (que ainda não foi lançado).
Navio tem sido essencial para o Buddy Marketplace (aplicativo iOS), ajudando-nos a lançá-lo em apenas 2-3 meses. Seu uso no aplicativo, que está ganhando usuários diariamente e precisa de novos recursos rapidamente, nos permite focar mais na criação de uma valiosa lógica de negócios em vez de lidar com tarefas de configuração básicas.
No entanto, o Navio ainda é uma biblioteca jovem e não possui alguns recursos, como integração de vinculação profunda, que são importantes para toda a sua eficácia nos aplicativos de produção. Como faz parte de um aplicativo ao vivo, pretendo atualizá -lo regularmente, adicionando novas funcionalidades. Você pode ver o que está por vir verificando a seção de planos futuros.
Se você estiver usando o Navio em seu aplicativo, eu adoraria ouvir você e se houver recursos adicionais que você está procurando.
Navio começou como um projeto experimental (e um pouco estranho), com o objetivo de minimizar o código repetitivo no layout do aplicativo usando a navegação react. Gosto do conceito de configuração estática, onde toda a configuração do layout do aplicativo é condensada em um único arquivo. Depois de implementá-lo no Starter Expo e receber feedback positivo, decidi integrá-lo ao aplicativo móvel ativo. Existem recursos adicionais que eu gostaria de integrar ao Navio. Um dos objetivos mais emocionantes é mesclar a navegação reagir e reagir as funcionalidades de navegação nativa em uma API unificada, simplificando o processo de desenvolvimento ainda mais.
Ainda há algumas coisas que eu gostaria de adicionar à biblioteca:
.updateOptions() Para guias e gavetas específicas.
As guias podem ser colocadas dentro da gaveta e vice -versa.
Passe adereços para modais.
Facilitar o DeePlining, fornecendo linking Prop às telas. Emitir.
Faça do Navio Universal adicionando RNN e RNN-SCREENS.
Estender a função Navio e o layout do aplicativo.
Fácil integração do Navio com a Navegação React (por exemplo, Navio.stack ())
TypeScript Problems @ index.tsx Arquivo.
Sinta -se à vontade para abrir um problema para quaisquer sugestões.
Este projeto está licenciado pelo MIT
