Durante o desenvolvimento de aplicativos móveis no React Native, tentei várias bibliotecas padrão de navegação, mas ao usar cada uma delas senti uma dor terrível e infernal. Eles se tornaram tão inconvenientes e óbvios que o desenvolvimento dos recursos aparentemente mais simples se transformou em uma missão extraordinária.
Usando react-navigation ou react-native-router-flux, se você precisar criar uma tela que possa ser acessada de vários lugares diferentes, será muito difícil organizar uma hierarquia de rotas aninhadas para que tudo funcione como deveria. Ou, se você precisar que uma tela apareça com animação não padrão, também será necessário estufar. Além disso, a ideia prejudicial e destrutiva de incluir componentes da interface do usuário, como a barra de navegação e as guias superiores, está incorporada nessas bibliotecas. Isso é uma violação direta da abordagem unix-way, quando uma biblioteca executa uma e apenas uma função, mas qualitativamente. Devido a uma relação tão estreita entre os componentes da interface do usuário e a navegação, surgem erros com muita freqüência - várias barras de navegação aparecem na tela, uma das quais pode ter um botão voltar e outro nome de tela.
Tendo muita tristeza sufocada com as bibliotecas padrão, decidi desenvolver meu próprio navegador. Os principais objetivos do desenvolvimento foram a simplicidade da API, a falta de uma estrutura rígida para aninhar telas e a separação de animações do conteúdo. Então nasceu o react-native-easy-router.
Simplicidade da API e falta de estrutura rígida
Nos navegadores que eu usei anteriormente, os parâmetros passados para a tela podiam ser acessados apenas por um caminho complexo como `router.state.params.name`. No meu navegador, passo os parâmetros diretamente para o componente da tela. Em alguns casos, isso pode levar a um conflito de nomes, mas decidi negligenciar a solução para esse problema. Também no código abaixo, você pode ver que as rotas não possuem uma estrutura clara e você pode adicionar qualquer nova tela a partir de qualquer outra tela.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" />
Animações
A animação é ainda mais fácil de trabalhar. Se em react-navigation e react-native-router-flux foi necessário desviar para criar uma animação não padrão para uma tela específica, então em react-native-easy-router a tela pode voar com diferentes animações e, além disso, a tela pode voar e voar com diferentes animações. Por exemplo, no exemplo abaixo, a tela voará de baixo e voará para a direita.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" />
Você pode até adicionar suas próprias animações personalizadas. Talvez você queira que a tela voe para fora do canto inferior direito e caia ao mesmo tempo. Um exemplo de como fazer isso pode ser encontrado
aqui .
Conclusão
O navegador desenvolvido já é usado em vários de nossos projetos comerciais e recebeu pequenas distribuições e análises calorosas entre alguns desenvolvedores do React Native. Se você quiser ver mais exemplos de uso e decidir se é possível usar esse navegador em seu projeto, poderá cavar no
repositório do projeto.