Publicado em: 17/03/2025
últimos vídeos
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.
Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.
Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.
Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Neste início de projeto, vamos explorar os fundamentos da navegação em React Native utilizando o React Navigation, a biblioteca recomendada pelo Expo para gerenciamento de rotas em aplicativos móveis.
Embora nosso aplicativo seja simples e teoricamente não exigiria um sistema de navegação complexo, a implementação do React Navigation serve como:
Começaremos com o Stack Navigator, a solução mais simples para navegação entre telas.
Para iniciar, precisamos instalar os pacotes essenciais:
1npm install @react-navigation/native npm install react-native-screens react-native-safe-area-contextEstas dependências fornecem:
O coração da navegação é o NavigationContainer, que deve envolver toda a aplicação:
@react-navigation/nativeReorganizamos a estrutura criando uma pasta src para o código fonte, com:
routes.tsx para configuração das rotasNo React/React Native:
App.tsx é o componente raiz da aplicaçãoA View (similar a uma div no HTML) é o container básico para estruturar a interface.
Continuando nossa implementação, vamos configurar o Stack Navigator para criar o fluxo básico de navegação entre telas.
Organizamos nosso projeto com:
Os componentes seguem a convenção React de:
Instalamos o pacote específico para navegação nativa:
1npm install @react-navigation/native-stackDiferenças importantes:
Implementamos duas telas de exemplo:
1// Tela Products
2 const Products = () => {
3 return (
4 <View>
5 <Text>Hello from products</Text>
6 <Button
7 title="Navigate"
8onPress={() => navigation.navigate("Products2")}
9 />
10 </View>
11 );
12 };E uma segunda tela criada inline (apenas para demonstração):
1<Stack.Screen name="Products2" component={() => <Text>Hello from products 2</Text>} />Observação: A criação inline de componentes não é recomendada em produção devido a problemas de performance.
Toda tela registrada no navigator recebe automaticamente:
O método principal para navegação é:
1navigation.navigate("NomeDaRota")O Stack Navigator oferece diversas opções de customização:
1options={{title: "Custom Title", headerShown: false, headerStyle: {
2 backgroundColor: "#f4511e",
3},
4 headerTintColor: "#fff",
5}} Podemos esconder o header completamente ou ajustar seu estilo conforme o design do aplicativo.
Para garantir segurança e autocompletar inteligente, definimos um tipo que descreve todas as rotas:
1type RootStackParamList = {
2 Products: undefined;
3 Details: undefined;
4};Este tipo:
Com a tipagem implementada, nosso arquivo de rotas fica robusto:
1const Stack = createNativeStackNavigator<RootStackParamList>();
2 function Routes() {
3 return (
4 <Stack.Navigator>
5 <Stack.Screen name="Products" component={Products} />
6 <Stack.Screen name="Details" component={Details} />
7</Stack.Navigator>
8);
9}Benefícios desta abordagem:
Cada tela recebe props tipadas que incluem:
1type ProductsScreenProps = NativeStackScreenProps<RootStackParamList, "Products">;
2 function Products({ navigation }: ProductsScreenProps) {
3 // ...
4 } Isso nos dá acesso a:
Implementamos um fluxo simples entre Products e Details:
1// Navegação de Products para Details
2 navigation.navigate("Details");
3// Navegação de Details de volta para Products
4 navigation.navigate("Products"); Observações importantes:
Na próxima aula focaremos em:
Esta implementação inicial nos proporcionou:
Boas práticas para evolução do projeto:
Embora tenhamos usado um exemplo simples (Products/Details), estes mesmos conceitos se aplicam a aplicações complexas com dezenas de telas e fluxos de navegação sofisticados. A combinação de React Navigation com TypeScript proporciona uma experiência de desenvolvimento mais produtiva e segura.