React Native é um framework que permite criar aplicativos Android e iOS. Você escreve seu código na linguagem de programação JavaScript e JSX. Ele foi desenvolvido pelo Facebook e foi lançado em março de 2015, durante a conferência F8 do Facebook. Foi nesse evento que o Facebook anunciou o React Native como um projeto de código aberto, permitindo que os desenvolvedores o utilizassem para criar aplicativos móveis multiplataforma. Desde então, o React Native tem passado por várias atualizações e continua a ser ativamente desenvolvido e mantido pela comunidade de código aberto e tem ganhado grande popularidade entre os desenvolvedores devido à sua abordagem inovadora e eficiente para o desenvolvimento multiplataforma.

Principais características do React Native

O React Native possui várias características distintivas que o tornam uma escolha popular entre os desenvolvedores. Vamos explorar algumas das principais características e recursos que tornam o React Native uma estrutura de desenvolvimento móvel tão poderosa:

• Desenvolvimento Multiplataforma: O React Native permite que você desenvolva aplicativos móveis para iOS e Android usando uma base de código comum. Isso significa que você pode compartilhar a lógica de negócios, componentes e funcionalidades entre as duas plataformas, economizando tempo e esforço significativos no desenvolvimento.
• Componentes Reutilizáveis: O React Native oferece um conjunto rico de componentes pré-definidos, conhecidos como "componentes básicos" (core components). Esses componentes são construídos com base nos elementos nativos da interface do usuário das plataformas iOS e Android. Além disso, você também pode criar seus próprios componentes personalizados para reutilização em vários aplicativos e projetos.
• Abordagem Declarativa: O React Native segue uma abordagem declarativa, em que você descreve como a interface do usuário deve ser renderizada com base no estado atual do aplicativo. Com essa abordagem, você não precisa se preocupar em manipular diretamente as atualizações de interface do usuário. Em vez disso, você define como a interface deve ser exibida em diferentes estados e o React Native se encarrega de atualizá-la de forma eficiente.
• Hot Reload: O recurso de "hot reload" do React Native permite que você veja as alterações feitas no código instantaneamente no aplicativo em execução, sem precisar recompilar ou reiniciar o aplicativo. Isso acelera o processo de desenvolvimento, permitindo que você faça alterações e itere rapidamente na interface do usuário, estilos e lógica de negócios.
• Acesso a Recursos Nativos: Embora você desenvolva aplicativos usando JavaScript, o React Native oferece acesso a recursos e APIs nativas do dispositivo por meio de módulos JavaScript específicos. Isso significa que você pode acessar facilmente funcionalidades como câmera, GPS, sensores e notificações push, aproveitando as capacidades completas do dispositivo.
• Desempenho de Alto Nível: O React Native busca oferecer um desempenho de alto nível, garantindo que os aplicativos sejam executados suavemente e de forma responsiva. Ele utiliza uma arquitetura de thread separada para lidar com as operações de interface do usuário, garantindo uma experiência fluida para os usuários.
• Comunidade Ativa: O React Native possui uma comunidade de desenvolvedores ativa e em constante crescimento. Isso significa que há uma abundância de recursos, bibliotecas, exemplos e suporte disponíveis para ajudar os desenvolvedores a resolver problemas, encontrar soluções e acelerar o desenvolvimento de aplicativos.

Essas características tornam o React Native uma escolha popular entre os desenvolvedores, permitindo que eles criem aplicativos móveis de alta qualidade, eficientes e nativos para iOS e Android. Com a capacidade de compartilhar código, reutilizar componentes e aproveitar recursos nativos, o React Native oferece uma abordagem produtiva e eficaz para o desenvolvimento móvel.

Vamos utilizar no primeiro semestre do nosso curso uma plataforma chamada Snack Expo

É uma plataforma para construir e executar aplicativos React Native no navegador. Você pode escrever código React Native e executá-lo diretamente no navegador ou no app Expo Go. Para salvar seus códigos na plataforma Snack você deverá criar uma conta.

A plataforma Expo Go é um ambiente de desenvolvimento para React Native que permite testar e executar aplicativos React Native diretamente em dispositivos móveis iOS e Android. Ele oferece uma maneira rápida e conveniente de visualizar o aplicativo em tempo real durante o processo de desenvolvimento.

Ao usar o Expo Go, os desenvolvedores podem evitar a necessidade de configurar um ambiente de desenvolvimento específico para iOS e Android. Em vez disso, eles podem se concentrar no desenvolvimento do aplicativo em JavaScript usando o Expo CLI ou o Expo Snack.

Principais recursos e benefícios da plataforma Expo Go:

• Experiência em tempo real: Com o Expo Go, é possível visualizar as alterações no aplicativo em tempo real, à medida que são feitas durante o desenvolvimento. Isso permite uma iteração rápida e uma experiência mais eficiente para ajustar a aparência e o comportamento do aplicativo.
• Suporte a hot reload: Assim como o React Native, o Expo Go suporta o recurso de hot reload, permitindo que você veja as alterações feitas no código instantaneamente no aplicativo em execução. Isso facilita a depuração e o ajuste de problemas sem a necessidade de reiniciar o aplicativo.
• Acesso a recursos nativos: O Expo Go oferece uma ampla gama de APIs e componentes nativos que podem ser usados em aplicativos React Native. Isso inclui recursos como câmera, GPS, notificações push, armazenamento local e muito mais. Esses recursos nativos podem ser facilmente acessados e utilizados no aplicativo sem a necessidade de configurar e integrar bibliotecas adicionais.
• Publicação e compartilhamento fácil: Com o Expo Go, é possível publicar o aplicativo para compartilhamento com outras pessoas de forma rápida e simples. Isso facilita a demonstração do aplicativo para clientes, testadores ou colegas de equipe, permitindo que eles visualizem o aplicativo diretamente em seus dispositivos móveis.
• Acesso a comunidade e recursos do Expo: A plataforma Expo Go é suportada pela comunidade Expo, que oferece uma ampla gama de recursos, como documentação, exemplos, bibliotecas adicionais e suporte da comunidade. Isso torna o desenvolvimento com o Expo Go ainda mais fácil e eficiente.

Embora o Expo Go seja um ambiente de desenvolvimento muito útil e prático, é importante observar que ele possui algumas limitações em relação ao desenvolvimento nativo tradicional do React Native. Dependendo dos requisitos específicos do aplicativo, pode ser necessário fazer uso do React Native CLI e configurar um ambiente de desenvolvimento nativo completo.

No entanto, para muitos casos de uso, o Expo Go oferece uma solução rápida e eficiente para o desenvolvimento React Native, permitindo que os desenvolvedores testem, iterem e compartilhem aplicativos em tempo real diretamente em dispositivos móveis.

No React Native, os componentes são a unidade fundamental para a construção de interfaces de usuário. Um componente é uma parte autônoma e reutilizável do aplicativo que pode ser combinada com outros componentes para criar uma hierarquia de interface do usuário.

Existem dois tipos principais de componentes no React Native:

• Componentes Funcionais: Também conhecidos como componentes "stateless" (sem estado), os componentes funcionais são funções JavaScript que recebem um conjunto de propriedades (props) como argumento e retornam elementos React (outra forma de componente).
• Componentes de Classe: Também conhecidos como componentes "stateful" (com estado), os componentes de classe são classes JavaScript que estendem a classe React.Component. Eles possuem um estado interno e são capazes de gerenciar a lógica do aplicativo, além de renderizar elementos na interface do usuário.

Ao criar componentes no React Native, é importante considerar a reutilização e a modularidade. Componentes bem projetados e reutilizáveis podem acelerar o desenvolvimento, melhorar a manutenção do código e promover uma base de código limpa e organizada.

Neste curso usaremos apenas componentes funcionais para construir nossas aplicações. Em javascript existem duas formas de definir uma função:

1. Declaração de função

function minhaFuncao(parametro1, parametro2) {
  // corpo da função
 }

Neste exemplo, usamos a palavra-chave function seguida pelo nome da função (minhaFuncao). Em seguida, entre parênteses, você pode listar os parâmetros separados por vírgula, se houver. Dentro das chaves {}, você escreve o corpo da função, onde o código a ser executado quando a função for chamada é definido.

2. Arrow function

const minhaFuncao = (parametro1, parametro2) => {
  // corpo da função
};

As arrow functions (funções de seta) são uma sintaxe mais curta e concisa para definir funções em JavaScript. Neste exemplo, a seta ( => ) substitui a palavra-chave function, e os parâmetros e o corpo da função são especificados da mesma maneira que nas expressões de função.

Independentemente do método escolhido, você pode chamar a função posteriormente usando seu nome e passando os argumentos necessários, se houver. Por exemplo:

minhaFuncao(argumento1, argumento2);

Elementos no React Native e JSX

No React Native, os elementos são as unidades básicas que compõem a interface do usuário. Eles representam os componentes em si ou outros elementos. Os elementos são semelhantes aos componentes funcionais e podem ser renderizados na interface do usuário.

JSX (JavaScript XML) é uma extensão de sintaxe do JavaScript que permite a criação de elementos de interface de usuário (UI) de forma declarativa. JSX combina XML com JavaScript, permitindo que você escreva componentes de interface de usuário usando uma sintaxe semelhante ao HTML, mas com a capacidade de usar recursos poderosos do JavaScript. A sintaxe JSX torna a criação de elementos e a composição da interface do usuário mais expressiva e legível.

Os elementos JSX são semelhantes aos elementos HTML, mas na verdade são objetos JavaScript. Eles contêm informações sobre o tipo de componente ou elemento que será renderizado, bem como as propriedades (props) associadas a ele. Os elementos também podem conter outros elementos como seus filhos, permitindo a criação de uma hierarquia de elementos/componentes.

Com o JSX, você pode criar hierarquias de elementos UI, definir propriedades e manipular eventos de forma fácil e intuitiva. Ele é usado como uma linguagem de marcação para descrever como os componentes devem ser renderizados.

Aqui está um exemplo de um elemento React Native escrito com a sintaxe JSX:

<Text style={{ color: 'red' }}>Olá mundo</Text>

Neste exemplo, o elemento é renderizado como um componente <Text> na interface do usuário, com o estilo definido e o texto "Olá mundo" é exibido na tela.

O JSX é uma parte essencial do desenvolvimento com o React Native, pois simplifica a criação de interfaces de usuário, permitindo que os desenvolvedores escrevam código mais legível e expressivo.

Incorporando expressões JavaScript

Uma das vantagens do JSX é que ele permite a incorporação de expressões JavaScript dentro do código. Isso significa que você pode usar variáveis, funções e até mesmo estruturas de controle para manipular a renderização da interface do usuário. Para escrever código JS dentro de um elemento JSX basta envolver o código JS entre chaves { }.

Por exemplo, vamos supor que temos uma variável isLoggedIn que indica se um usuário está autenticado ou não. Podemos usar essa variável para condicionalmente renderizar diferentes elementos JSX:

{isLoggedIn ? <WelcomeMessage /> : <LoginButton />}

Ponto de entrada

Todas as funcionalidades do aplicativo React Native devem ser incluídas em um único componente React, exportado como padrão (export default) do arquivo de ponto de entrada.

import * as React from 'react';

const App = () => (
  // todas as funcionalidades do aplicativo são inseridas aqui
);

export default App;

Pacotes

Você pode importar diferentes pacotes para obter acesso a diferentes APIs ou funcionalidades nativas.

import { Camera } from 'expo-camera';
import { Rext, ViewMapView } from 'react-native-maps';

Temos um conjunto de componentes básicos que usaremos na maioria dos aplicativos:

Todos componentes podem ser customizados por meio das propriedades (props). Por exemplo, o código abaixo define a quantidade de linhas do texto:

<Text numberOfLines={1}>Alea jacta est</Text>

Para utilizar estes componentes é necessário declarar a sua importação no início do arquivo. Os componentes básicos são importados do pacote 'react-native' :

import { Text } from 'react-native';

Componente <Text>

O componente <Text> é a única maneira de exibir texto em React Native. Esses componentes podem ser aninhados para herdar e modificar o estilo.

import { Text, View } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1, margin: 28 }}>
      <Text style={{ color: 'blue' }}>
        Texto dentro do componente pai.
        <Text style={{fontSize:10}}> Texto dentro do componente filho. Herdou a cor do componente pai
        </Text>
      </Text>
    </View>
  );
}
export default App;

Componente <View>

O componente <View> é um contêiner "visível" genérico sem qualquer significado semântico ou impacto perceptível no desempenho, melhor traduzido como <div> de web. Utilizado para criar uma UI composta por mais de um componente, quando é necessário envolver os componentes em um container <View>.

import {Text, View } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ margin: 28, backgroundColor: 'red', color:'#fff' }}>
        <Text style={{ color:'#fff' }}>Texto em branco com fundo vermelho</Text>
      </View>
    </View>
  );
}

export default App;

Componente <ScrollView>

É um contêiner "visível" genérico com rolagem de tela com impacto no desempenho do aplicativo, tornando-o menos adequado para estilos simples e linhas curtas de texto.

import { ScrollView, Text, View } from 'react-native';

function App() {
  return (
    <ScrollView>
      <Text style={{ padding: 8 }}>Topo do conteúdo</Text>
      <View style={{ marginTop: 2000 }} />
      <Text style={{ padding: 8 }}>Made you look!</Text>
    </ScrollView>
  );
}

export default App;

Componente <Image>

O componente <Image> é uma maneira otimizada de renderizar imagens de várias fontes, incluindo acesso HTTP remoto, arquivos locais importados com require e strings codificadas em base64. Consulte a documentação para saber mais.

Este exemplo mostra a busca e exibição de uma imagem do armazenamento local, bem como uma da rede e uma imagem codificada em base64':

import { View, Image, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: 'https://assets.betalabs.net/production/flexform/item-images/99d132c62f29d957dae37e0ad4b9a95e.jpg',
        }}
        style={styles.imagem}
        resizeMode='contain'
      />

      <Image
        source={require('./assets/snack-icon.png')}
        style={styles.imagem}
        resizeMode='contain'
      />

      <Image
        resizeMode='contain'
        style={styles.imagem}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAAB4CAIAAAAVAgUGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAwaSURBVHhe7Z0fnCpdGMdfuHDhwsKFCxcWFlaCYCEIgiAIFoKBgYGBgYEgCJIgCIIgCIIgCIKFIAiChYUgCYIgCIIgCIL7/s6cmp051TR1pp06e/p84d731u4zz3ee5/yZad7/HjO6RGykY/GRjsVHOhYf6Vh8pGPxkY7FRzoWH+lYfKRj8ZGOxUc6Fh/pWHykY/GRjsVHOhYf6Vh8btTxk6I/qcazbkSMHbrxrBlPisG88+u55dgOcnOOkb6IacSLRqpuvrZNpWuqPVPpmZmOmW6aibLxkiMJfVTYD34BJDbDiCG2mju2Nyu2yjY2nATMB8PlhhyjDqKmkayS3OlD0xxnt0wsrD8bo6w2IAmN5b/UNLTBbrJqnI6tZcYKoZ2FB7kVx0hKvGSgIIzhLn2eIJsoJuT9Czokyhe1u41tZ9QDElvdRDe6kYK+CccQjPLV3q368JFEwoTUDRpmNHvdVEIwmvAFsWFwQeu+Bc3hO6aC9Q9HA/TJLpXX00wFk9h82nWDxn4LmkN2TJJYNnRaJQ6yk2xhWqzNas15qz3vtObt+qxRnpZzkxzzTlLNLRMzW+Yn8wM3mPqRCmYEI7ZJsbqLrT1vN+Y0trzrbRboNBhQmJ/8xYTpGEnEaY6pKZMXZLA1bw1Xw8Vmsf633vzbgOVmOVlPuotueVrJOk2jmodZVBtOF+bnc4IBlcTmFpyfFJrz5sdqOF9/xrbarKbraW/RqzCx4RQcmsmaGXhsZxGmY3TpVMNEITqTUpyW+ss+jP6zXpvdi/4VaR2vxrVZnUklFjDo2MzP5wHnH+ZNzl8BCpNCd9HziA1nYWPWYGJT+6RjMz//KwnPMS3ivqtQ0J8Hy8F6s0bKlstlv9+vVquFQqFUKrXb7el0ShOKokEbRz+3P4gTBQubJ3Xvt1wKVnGYHjtjQwX3ln0a22q1GgwGdmytVmsymdDYZusZhhX7UwCx4XQJsZRDc4w1D6w4VyMYazuLDvoeydRsViwWo9How8PDjx8/fv78+fj4qKrq+/s7TSU6OSreziNQ3oIcldH8mQaD4YPGNp/PK5XKy8uLHdvfv39fX197vR6NbbQas7F1yVKK+RVfRmiO0agxH3EmAtMW9DrkaLFYoD7+/Pnzn/uFbKbT6Y+PD7wH6UbSP0t5ksXsl05i+SGxtdwNZlIcr0hsqOByubwfG2QnEgkUN42tvejYnwWILVb4fo4xfDpnNLC1LZTNptPpoGq3yXO/oDmbzaKNI5Xvyw/0TzuPdIKN+uMnWWMbNUZZWsQYPp6enrbRuF+ITdM0GttwNWJiI0NJSBvaoTl+ybvyiEaN0Y7Mn5fLXC6HfG0zt/eKxWLD4RB5xKhcmpbtPAKkUh8GwP5e29uii9+IVowGg5LdhrL3ikQitM1gVMb83xxvGxUZkhuhDcmhOUbv2m4eEUwsLlGXJDuzWSaT8cgjShwjH96JlZWVx62GLThpAsH9Y/tL0oTX67WiKNs4Dr0wMKMJ0dgwK/x0PM6mmyaGACYJX0OYjh17W9TxewCOr4N0fAnxotMx7dU92qvz+bxHr47H47RXT0ivdk1fr4fdqzHb9+7VNDamVwPMFb67Y7TH5rxJtxe63e7z8/M2be7Xr1+/MCJicou3DZbv+UPbh9egPqvTORcWbx5zLtM0aWxY2jnnXOA7Oo4xjscmJlDj1RgJomun379/b5O3e6GAnGsnnBOOj18Xa+1EYju2doLgZDKJM4DG1p63mZ+Q/o6OXeMxITvJYflESxmjcqVSQVtGNh8eHuAblW0YBt0DQUvH4I28Oz9+bRrzJi1lnIK1Ws0ZGypb13U7Nmt/xhWbnHN9UpgU+ss+TSUqBmNbs9lE3SCnmGfN53OaxPFqUp1Vmc9eG4wLvUXP3sscjUY0tmq1isEFJyX+O2KbrA/EJh27KE5L3UUP81Lki2Rts8FsdrMmf8YL+lElVbJZzV5k/ALQObqL7rHY8KfRamTFxn5QOmZBxdRnDXRjzE7RuuEVILOj1biz6JCt4L0kfhlY49VmdUz3mNgwWr8t3pg9GRvp+AAoBcxLK7MqRsHWvN2ct7DchN1QyncfEtu0QmPDHALWEdv+/Qs20vExvP81XM6LTToWH+lYfKRj8ZGOxUc6Fh/pWHykY/GRjsVHOhYf6Vh8pGPxkY7FR0THuy8ckOclHPn2rXT8iY908RCkY/ItEl2PFrRYRY3X1ERdjVfVl5IWyWrPmnUMjjdLx0+q/mzoL4fSFeCX80BgjmHxpagmW0q6m3ntf5LuZdJvSrKpxEoqDsk2/X0do2Q1PZrX4DXVOZCu1JuCf4qYGlMVFxOMY5QvzkEmXAZEjzOAmNbJR76nY2iL5jSUrHeuAHKF8yAQzQE4xllJBPcyrwM2UBfWv+JtiYaC44yXDjwiQlSI45YZzepoyyhTOxvepNokUfwjNK9jnGgYUchZ6SNogvU2HGe6rZ2o40k2O81lZ/fA9MBXpBgyXSPZsiqBSYgnqHja9njgdYwhFmOtX8EOlHfVGB1xDLuzXH5ZyK/uhGUhN897a9Y+9NeBVcHngOJ5KfJ2bC7HpIiL2ukufQji+OBdUVTwqlBYF+8IBJxbeGg2taGeOd8xwNDGWcp8jjUdzeQCweCYY/RnlAWTwbsAmnF2Moez41LHAzKucY7KXI7RqDH7D9LxJIumd3dFbHO8lC93jDYZK6s87ZrDsbUMOHcSYXPU8SLPJO6OQAcK2LEFmiXPrsjljulgzETjH2EdY47NHBSBw/Egg1ktz5DM4VjV0UPYgHwjHfsFjttKxGDz7x8ux/GqdOziSo5TcGxqTP79w+e4Jh27uJbjjhLJSse3gYiOZa92I6DjWEU6diHceKzosZJ07OJKjpMt5TmcebV1xelV7oE4uJLjBNbHGpt//1zu+FHRMUjIfS4nV3HczyRqIe1zASzMyRXvYPerpWMn9n51WI6f9QsvHgPp2Bdw3M1gTAzpmoS9fJKOd1zDMVk4cUyqAZdjDMnkskSA9whIx3skw71HAGDaddklZOnYJ/EK12AMeB1jTn/5/VzS8SkwGEfzvLdm8jomOyH0CuOZmqXj01i7HzxXFSkBOCarZP/33u6Qjv2AKS1nowa8jgHadaJxdvTS8QmwanojqybORg0CcEw2NUtn3/QjHZ+E8xYfmwAcg4ipp9rnzbykYy/o9lYpgEYNgnG83QyxgnPFehzp2Avu64lOgnFMr0+ctVCWjr0JZLZFCcixs5T9IR0fhfvGD4bAHG9L2fdlKOn4MFb2AixiEJzjM0tZOj6MXcTcSyabIB2fNSpLx4fhvlq8T6COrVJGiOTmkFOapeODkM1Lk80qJwE7RilvbxzYi55BOmahtwNwf6N8n6AdW9te0byWPjX5ko5d0KlWTeW5N+8YwTsGZPJVOdGxhXV86XdTrS4d2HrJyVUck45tnLhQcdTx/P4eFGGDE/Qyx2h71+jSlOs4BvYce+94KIcdf8NnRdCtae6bPTy4mmNrYCZPhDkyMB9zjDqgD/VhMnjjkGe+eD3ax6uOA3lAkwfBOUafYYBmzVpKHXqm3FHHwNKMvofE3Qfk2U2544LBUcdkGM5aXXofJsOXwu1YITOsiEGeDYLp9D4oZRwGc2DAyzHlXp7BNrXsegkGhx3j7I9XVSZjW3KHnyV7AVyO8euxYMdYAovk0XnHOLeOBeSI4x4076VrB2YziQY5A8hQzWH6csdU8Ha7AyOuN+5jA9IxgcnSPnTKXeJ62jGH4/PvC3AiHfuF3i8QynfMyZ7lmff3OPlmjrNwfHGu0NIxrbm4XXM5PvceLifKu6KPDCYR4mKqH9rFuQJo1yE4Rq8mD8vci8YnaFw4tfdyISbGyETfYjLgF/Rqvkdmcs258Iu3O1k4Q88Hh/0dShlDkjbcFbE7A35Ao8a8J6TnCFDNeS3RsOb6WAacyWsP1axqHwZOcyTiE/x1hHP/HmEPRB8a6rv22r8kP1hzYjTE0pTsgoWydqJAMyKA6VhJjZXPp6LGK1qyrqeaRnpHqmGk6kaqZt4ZdfB5FPRAElVyCY49an9gnhUxeRfHgNfxlt3/oShQjHuDiT8A2DxfRECOJTeMdCw+0rH4SMfiIx2Lj3QsPtKx+EjH4iMdi05G/x+H7Z1CncEg0QAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    margin: 8,
    marginTop: 30,
    // justifyContent:'center',
    alignItems:'center'
  },
  imagem: {
    width:'50%',
    height:'50%',
    flex:1
  },
});

export default App;

Componentes personalizados

Componentes personalizados desempenham um papel fundamental no desenvolvimento de aplicativos React Native, permitindo que você crie elementos reutilizáveis e modularize seu código. Nesta seção, vamos explorar como criar e utilizar componentes personalizados, juntamente com exemplos para ilustrar sua aplicação.

Criando Componentes Personalizados

Para criar um componente personalizado, você pode utilizar a funcionalidade de criação de componentes do React Native. Isso envolve a definição de uma função que retorna o JSX desejado. Aqui está um exemplo básico de um componente personalizado de texto:

import { Text } from 'react-native';

const Texto = () => {
  return <Text>Alô mundo</Text>;
};

export default Texto;

Neste exemplo criamos um componente chamado Texto que renderiza na tela o texto ‘Alô mundo'. Observe que para criar uma componente basta definir uma nova função, neste caso usamos a sintaxe arrow function. Importante notar que o nome da função deve ser escrito com a primeira letra em maiúscula.

Podemos também adicionar a este componente propriedades para, por exemplo, passar para o componente o texto a ser exibido no lugar do texto ‘Alô mundo':

import { Text } from 'react-native';

const Texto = ({texto}) => {
  return <Text>{texto}</Text>;
};

export default Texto;

No exemplo acima adicionamos o parâmetro texto à função. Observe que o nome do parâmetro está entre {} na entrada da função e na sua utilização dentro do código JSX (Relembre sobre expressões JavaScript dentro de código JSX na seção Incorporando expressões JavaScript do capítulo anterior).

Utilizando Componentes Personalizados

Após criar um componente personalizado, você pode utilizá-lo em qualquer lugar do seu aplicativo React Native. Basta importar o componente e renderizá-lo como faria com qualquer outro componente nativo. Aqui está um exemplo de como usar o componente Texto criado anteriormente:

import { Text, View } from 'react-native';

export const Texto = ({texto}) => {
  return <Text>{texto}</Text>;
};

function App() {
  return (
    <View style={{ margin: 28 }}>
      <Texto texto="exemplo de criação de componente"/>
    </View>
  );
}

export default App;

Ao utilizar componentes personalizados, você pode reutilizá-los em diferentes partes do seu aplicativo, simplificando o código e promovendo a consistência visual. Além disso, você pode estilizar e adicionar funcionalidades adicionais aos componentes personalizados para atender às necessidades específicas do seu projeto.

Componentes personalizados são uma parte essencial do desenvolvimento de aplicativos React Native. Eles permitem que você crie elementos reutilizáveis, modularize seu código e promova a consistência visual em seu aplicativo. Ao criar e utilizar componentes personalizados, você pode simplificar o desenvolvimento, melhorar a manutenibilidade do código e criar interfaces de usuário mais flexíveis.

Exercícios

Uma parte importante do desenvolvimento de aplicativos React Native é a estilização de componentes. Nesta seção, exploraremos como aplicar estilos aos componentes e personalizar sua aparência para criar interfaces de usuário atraentes e responsivas.

Estilos inline

No React Native é possível definir estilos embutidos diretamente nos componentes usando a propriedade style. Os estilos embutidos são semelhantes aos estilos em CSS, mas com algumas diferenças sintáticas.

Aqui está um exemplo de como aplicar estilos embutidos a um componente <Text>:

<Text style={{ fontSize: 16, color: 'blue' }}>Hello, World!</Text>

Nesse exemplo, definimos um objeto JavaScript ({ fontSize: 16, color: 'blue' }) dentro da propriedade style. As propriedades desse objeto representam as regras de estilo, como fontSize e color, seguidas por seus valores correspondentes.

Observe que as propriedades CSS são escritas em camelCase (por exemplo, backgroundColor em vez de background-color). Além disso, algumas propriedades podem ter valores diferentes ou limitações em comparação com o CSS padrão, devido às peculiaridades do ambiente de renderização do React Native.

Os estilos embutidos permitem que você defina propriedades de estilo específicas para cada componente individualmente. No entanto, quando você precisa aplicar estilos a vários componentes com propriedades semelhantes, pode ser mais eficiente e organizado o objeto StyleSheet.

Componente StyleSheet

StyleSheet é uma abstração que substitui CSS aceitando regras de estilo CSS usando um objeto JavaScript bidimensional e permite definir estilos separadamente em um objeto JavaScript e aplicá-los a vários componentes. Isso promove a reutilização e a organização do código de estilo. Veja o exemplo abaixo:

 import { Text, View, StyleSheet } from 'react-native';

function App() {
  return (
<View style={styles.container}>
  <Text style={styles.text}>Exemplo de StyleSheet</Text>
</View>
  );
}
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
    alignItems: 'center',
    justifyContent: 'center',
    margin:28
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Nesse exemplo, usamos o método StyleSheet.create() para criar um objeto de estilo chamado styles. Dentro deste objeto, definimos várias regras de estilo para os componentes.

Usar o objeto StyleSheet é particularmente útil quando você precisa reutilizar estilos em vários componentes ou quando deseja manter a separação de preocupações entre a lógica e a aparência do aplicativo.

Estilização avançada

O React Native oferece recursos avançados de estilização para atender a necessidades mais complexas de interface do usuário. Alguns desses recursos incluem:

• Uso de flexbox: O flexbox é um modelo de layout poderoso que permite criar layouts flexíveis e responsivos. No React Native, você pode usar propriedades como flexDirection, justifyContent e alignItems para controlar o posicionamento e o dimensionamento dos componentes.
• Estilos condicionais: Você pode usar expressões JavaScript dentro de estilos embutidos ou folhas de estilo externas para aplicar estilos condicionalmente com base em determinadas condições. Isso permite que você altere a aparência do componente com base em estados ou dados específicos. Exemplo: style={[styles.paragraph, props.isActive && styles.selected]}
• Estilização de componentes personalizados: Além de aplicar estilos aos componentes fornecidos pelo React Native, você também pode criar seus próprios componentes personalizados e estilizá-los conforme necessário. Isso permite que você crie uma biblioteca de componentes reutilizáveis e mantenha uma aparência consistente em todo o aplicativo.

Altura e Largura

No desenvolvimento de aplicativos React Native, a altura e a largura dos componentes desempenham um papel fundamental na criação de interfaces de usuário responsivas e visualmente agradáveis. Temos três maneiras de trabalhar com a altura e a largura dos componentes: dimensões fixas, dimensões percentuais e dimensões flexíveis.

Dimensões fixas

A maneira geral de definir as dimensões de um componente é atribuindo um valor fixo para a largura (width) e altura (height) ao estilo do componente. Todas as dimensões no React Native não têm unidade e representam pixels independentes de densidade.

import { View } from 'react-native';

function App() {
  return (
    <View style={{margin:28}}>
      <View style={{
        width: 50, height: 50, backgroundColor: 'powderblue'
      }} />
      <View style={{
        width: 100, height: 100, backgroundColor: 'skyblue'
      }} />
      <View style={{
        width: 150, height: 150, backgroundColor: 'steelblue'
      }} />
    </View>
  );
};

export default App;

Dimensões flexíveis

Use flex no estilo de um componente para que o componente seja expandido e reduzido dinamicamente com base no espaço disponível. Normalmente você usará flex: 1, que diz a um componente para preencher todo o espaço disponível, compartilhado igualmente entre outros componentes com o mesmo pai. Quanto maior o flex dado, maior a proporção de espaço que um componente ocupará em comparação com seus irmãos.

import { View } from 'react-native';

function App() {
  return (
    <View style={{ margin: 28, flex: 1 }}>
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
        <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
        <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
      </View>
    </View>
  );
}

export default App;

Dimensões Percentuais

Se você deseja preencher uma determinada parte da tela, mas não deseja usar o flex layout, pode usar valores percentuais no estilo do componente. Semelhante às dimensões flexíveis, as dimensões percentuais requerem um pai com um tamanho definido.

import { View } from 'react-native';

function App() {
  return (
    <View style={{ height: '100%',margin:28 }}>
      <View style={{
        height: '15%', backgroundColor: 'powderblue'
      }} />
      <View style={{
        width: '66%', height: '35%', backgroundColor: 'skyblue'
      }} />
      <View style={{
        width: '33%', height: '50%', backgroundColor: 'steelblue'
      }} />
    </View>
  );
}

export default App;

Exercícios

Para o exercício 2 use o código a seguir como modelo.

import { View, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.quadrado, styles.cor1]} />
      <View style={[styles.quadrado, styles.cor2]} />
      <View style={[styles.quadrado, styles.cor3]} />
      <View style={[styles.quadrado, styles.cor4]} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  quadrado: {
    width: 100,
    height: 100,
  },
  cor1: {
    backgroundColor: '#50E3C2',
  },
  cor2: {
    backgroundColor: '#4A90E2',
  },
  cor3: {
    backgroundColor: '#9013FE',
  },
  cor4: {
    backgroundColor: '#F5A623',
  },
  container: {
    margin: 8,
  },
});

export default App;

Este código gera a tela:

Neste capítulo, vamos explorar como lidar com a entrada de dados em um aplicativo React Native usando os componentes TextInput, Button e Pressable. A entrada de dados é uma parte essencial de muitos aplicativos, permitindo que os usuários interajam e forneçam informações ao aplicativo.

Componentes <TextInput> e <Button>

O componente TextInput é usado para receber entrada de texto do usuário. Ele permite que os usuários digitem texto em um campo de entrada de texto e interajam com ele. Vamos dar uma olhada no código visto anteriormente e trocar o componente Button pelo componente Pressable:

import { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

function App() {
  const [texto, setTexto] = useState('');
  
  const handleButtonPress = () => {
    Alert.alert('Texto digitado:', texto);
  };
  
  return (
    <View style={{ marginTop: 40, margin: 8, flex: 1 }}>
      <TextInput
        style={{
          fontSize: 20,
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          padding: 8,
          marginBottom:8
        }}
        onChangeText={setTexto}
        value={texto}
      />
      <Button title="Enviar" onPress={handleButtonPress} />
    </View>
  );
}

export default App;

Neste exemplo, importamos o <TextInput> da biblioteca react-native e usamos o componente dentro do componente <View>. O <TextInput> tem duas propriedades importantes: onChangeText e value.

A propriedade onChangeText recebe uma função que será chamada sempre que o texto no <TextInput> for alterado. Neste exemplo, usamos a função setTexto, fornecida pelo hook useState(), que atualiza o estado da variável texto a cada momento que o usuário digita dentro do campo de entrada <TextInput>.

A propriedade value define o valor do <TextInput>. Neste caso, estamos definindo o valor como texto, que é variável de estado que controla o valor do campo de entrada do componente <TextInput>.

Em seguida, temos o componente <Button> que renderiza um botão "Enviar". Quando o botão é pressionado, a função handleButtonPress é chamada. Essa função exibe um alerta com o texto digitado pelo usuário usando Alert.alert. Este componente não permite estilização, ou seja, mudar cor ou texto ou qualquer outra característica. É usado principalmente para prototipação rápida.

A necessidade de usar um hook, como o useState, para controlar o estado de uma variável em um componente funcional se deve a como o React gerencia a renderização e atualização desses componentes.

Quando um componente funcional é renderizado, ele é executado novamente sempre que há uma mudança em qualquer uma de suas dependências, como props ou estado. Isso significa que uma nova instância da função do componente é criada e todos os cálculos dentro dela são refeitos.

Se atribuíssemos um valor diretamente a uma variável no corpo do componente, toda vez que o componente fosse renderizado novamente, essa atribuição seria refeita e a variável seria reinicializada com seu valor original. Dessa forma, perderíamos a capacidade de manter o estado entre as renderizações e todas as alterações feitas anteriormente seriam perdidas.

Além disso, ao usar o useState, o React também otimiza o desempenho, permitindo que ele identifique apenas as partes do componente que realmente precisam ser atualizadas na tela, em vez de renderizar todo o componente novamente.

Em resumo, ao utilizar um hook como o useState, estamos aproveitando a capacidade do React de gerenciar o estado e garantir que as alterações sejam preservadas entre as renderizações do componente. Isso nos permite criar componentes mais dinâmicos e interativos, mantendo um bom desempenho em nossos aplicativos React.

Componente <Pressable>

O componente Pressable é usado para detectar toques ou pressões do usuário em uma área específica. Podemos aproveitar esse componente para criar interações com a entrada de dados. Este componente permite estilização, ao contrário do componente Button. Vamos ver um exemplo de uso do Pressable:

import { useState } from 'react';
import { Pressable, Text, View, TextInput, Button, Alert } from 'react-native';

function App() {
  const [texto, setTexto] = useState('');

  const handleButtonPress = () => {
    Alert.alert('Texto digitado:', texto);
  };

  return (
    <View style={{ marginTop: 40, margin: 8, flex: 1 }}>
      <TextInput
        style={{
          fontSize: 20,
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          padding: 8,
          marginBottom: 8,
        }}
        onChangeText={setTexto}
        value={texto}
      />
      <Pressable onPress={handleButtonPress}>
        <Text
          style={{
            padding: 8,
            width: '100%',
            color: 'blue',
            fontSize: 20,
            textAlign: 'center',
            backgroundColor: '#8b5',
            borderRadius:12
          }}>
          Enviar
        </Text>
      </Pressable>
    </View>
  );
}

export default App;

Neste exemplo, além do componente TextInput, adicionamos o Pressable em vez do Button. O Pressable envolve um texto "Enviar" e, quando é pressionado, a função handleButtonPress é chamada. Observe a estilização do componente Pressable, que não é possível no componente Button.

Exercícios

Introdução

Ao fim deste projeto teremos o famoso jogo da forca completamente desenvolvido. O projeto será realizado em quatro etapas, e vamos aprender conceitos importantes para a programação de aplicativos em React Native.

O que você vai aprender

• Versão 1: Lógica para manipular exibição de imagens diferentes.
• Versão 2: Renderização condicional. Implementação da lógica do jogo para adivinhar uma letra usando <TextInput>.
• Versão 3: Implementação da lógica do jogo para adivinhar uma palavra sorteada usando <TextInput>.
• Versão 4: Componentização e exibição de teclado.

Projeto Jogo da forca - V1

Link Snack

import { View, Pressable, Image, StyleSheet, Text } from 'react-native';
import { useState } from 'react';

function App() {
  const forca1 = require('./assets/forca.png');
  const forca2 = require('./assets/cabeca.png');
  const forca3 = require('./assets/cabecacorpo.png');
  const forca4 = require('./assets/cabecacorpoumbraco.png');
  const forca5 = require('./assets/cabecacorpodoisbracos.png');
  const forca6 = require('./assets/cabecacorpodoisbracosumaperna.png');
  const forca7 = require('./assets/cabecacorpodoisbracosduaspernas.png');

  const lista = [forca1, forca2, forca3, forca4, forca5, forca6, forca7];

  const [situacao, setSituacao] = useState(0);

  function onPress() {
    if (situacao == 6) {
      setSituacao(0);
    } else {
      setSituacao(situacao + 1);
    }
  }

  return (
    <View style={styles.container}>
      <Image style={styles.imagem} source={lista[situacao]} />
      <Pressable style={styles.botao} onPress={onPress}>
        <Text style={styles.texto}>Tentativa</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  imagem: {
    width: '50%',
    height: '50%',
    borderWidth: 1,
    marginBottom: 20,
  },
  botao: {
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
  },
  texto: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

export default App;

Projeto Jogo da forca - V2

Link Snack

Em 10/07/2024, eu solicitei ao ChatGPT que explicasse o seguinte código:

import {
  View,
  Pressable,
  Image,
  StyleSheet,
  Text,
  TextInput,
} from 'react-native';
import { useState } from 'react';

function App() {
  const forca1 = require('./assets/forca.png');
  const forca2 = require('./assets/cabeca.png');
  const forca3 = require('./assets/cabecacorpo.png');
  const forca4 = require('./assets/cabecacorpoumbraco.png');
  const forca5 = require('./assets/cabecacorpodoisbracos.png');
  const forca6 = require('./assets/cabecacorpodoisbracosumaperna.png');
  const forca7 = require('./assets/cabecacorpodoisbracosduaspernas.png');

  const lista = [forca1, forca2, forca3, forca4, forca5, forca6, forca7];
  const letra = 'S';

  const [situacao, setSituacao] = useState(0);
  const [palpite, onChangePalpite] = useState('');
  const [mensagem, setMensagem] = useState('');
  const [fimDeJogo, setFimDeJogo] = useState(false);

  function validarPalpite() {
    console.log('---------> ', palpite.toUpperCase());
    if (letra.toUpperCase() === palpite.toUpperCase()) {
      setMensagem('acertou');
      setFimDeJogo(true);
      setSituacao(0);
    } else if (situacao < 6) {
      setSituacao(situacao + 1);
      onChangePalpite('');
    } else {
      setFimDeJogo(true);
      setMensagem('perdeu');
    }
  }

  function novo() {
    setMensagem('');
    setSituacao(0);
    setFimDeJogo(false);
    onChangePalpite('');
  }

  return (
    <View style={styles.container}>
      <Text style={styles.mensagem}>{mensagem}</Text>
      <Image style={styles.imagem} source={lista[situacao]} />
      <TextInput
        style={styles.input}
        maxLength={1}
        onChangeText={onChangePalpite}
        value={palpite}
        autoCapitalize="characters"
      />
      {!fimDeJogo && (
        <Pressable style={styles.botao} onPress={validarPalpite}>
          <Text style={styles.texto}>Tentativa</Text>
        </Pressable>
      )}
      {fimDeJogo && (
        <Pressable style={styles.botao} onPress={novo}>
          <Text style={styles.texto}>Novo jogo</Text>
        </Pressable>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  imagem: {
    width: '50%',
    height: '50%',
    // borderWidth: 1,
    resizeMode: 'contain',
  },
  botao: {
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
    margin: 12,
    width: '50%',
  },
  texto: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
    alignSelf: 'center',
  },
  input: {
    height: 40,
    width: 40,
    margin: 12,
    borderWidth: 1,
    textAlign: 'center',
    fontSize: 20,
  },
  mensagem: {
    fontSize: 50,
    margin: 12,
    color: 'red',
  },
});

export default App;

E aqui está o resultado:

Renderização condicional

A renderização condicional é um recurso que permite exibir ou ocultar componentes. Com o uso do operador condicional ternário (veja a documentação) podemos construir o seguinte código que exibirá uma mensagem específica conforme o valor da variável isLoggedIn

import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  const isLoggedIn = false;
  return (
    <View style={styles.container}>
      {isLoggedIn ? (
        <Text style={styles.paragraph}>Bem-vindo de volta!</Text>
      ) : (
        <Text style={styles.paragraph}>Por favor, faça o login.</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Projeto Jogo da forca - V3

Link Snack

Nesta versão vamos adicionar uma lista de palavras para ser adivinhada pelo usuário.

Projeto Jogo da forca - V4

Link Snack

Na última versão do nosso projeto não vamos adicionar funcionalidades ao jogo. Nós vamos componentizar o código, ou seja, criar componentes de foram que o código fique melhor organizado.

Introdução ao componente FlatList

O FlatList é um componente do React Native que permite exibir listas de elementos de forma eficiente, independentemente do tamanho da lista. Ele é especialmente útil para listas longas e dinâmicas que podem ser renderizadas sob demanda, melhorando o desempenho e a experiência do usuário. Veja exemplo:

Como usar o componente FlatList

Para usar o componente FlatList, você precisa primeiro importá-lo do pacote react-native. Em seguida, você pode renderizar uma lista de elementos com o FlatList passando as seguintes propriedades:

data: um array de objetos que serão exibidos na lista.

renderItem: uma função que recebe cada item do array e retorna um componente React que será exibido na lista.

A lista deve ser composta por objetos e cada objeto deve ter uma propriedade chamada id com valor único para cada objeto.

Aqui está um exemplo básico de como usar o FlatList:

import { View, FlatList, StyleSheet, Text } from 'react-native';

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
  { id: '6', title: 'Item 6' },
  { id: '7', title: 'Item 7' },
  { id: '8', title: 'Item 8' },
  { id: '9', title: 'Item 9' },
  { id: '10', title: 'Item 10' },
  { id: '11', title: 'Item 11' },
  { id: '12', title: 'Item 12' },
  { id: '13', title: 'Item 13' },
  { id: '14', title: 'Item 14' },
  { id: '15', title: 'Item 15' },
  { id: '16', title: 'Item 16' },
  { id: '17', title: 'Item 17' },
  { id: '18', title: 'Item 18' },
  { id: '19', title: 'Item 19' },
  { id: '20', title: 'Item 20' },
];

const App = () => {
  const renderizarItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList data={DATA} renderItem={renderizarItem} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    marginTop: 50,
  },
  item: {
    borderWidth: 1,
    borderColor: 'red',
    padding: 10,
  },
  title: {
    fontSize: 30,
  },
});

export default App;

Neste exemplo, estamos renderizando uma lista simples de vinte itens. Cada item é representado por um objeto que contém uma chave id e um título title. O componente FlatList recebe o array de objetos DATA, que é renderizado com a função renderizarItem, que retorna um componente View com o título do item.

Propriedades do componente FlatList

O FlatList possui várias propriedades que permitem personalizar sua aparência e comportamento. Algumas das propriedades mais comuns incluem:

ItemSeparatorComponent: um componente React que é renderizado entre cada item da lista. Isso permite adicionar um separador visual entre os itens.

ListHeaderComponent: um componente React que é renderizado no topo da lista. Isso permite adicionar um cabeçalho à lista.

ListFooterComponent: um componente React que é renderizado no final da lista. Isso permite adicionar um rodapé à lista.

onEndReached: uma função que é chamada quando o usuário chega ao final da lista. Isso é útil para carregar mais itens dinamicamente à medida que o usuário rola a lista.

onRefresh: é uma função que é chamada quando o usuário realiza uma ação de "puxar para atualizar" na lista. Isso é útil para atualizar os dados da lista com informações mais recentes.

Concluindo, o componente FlatList é uma ferramenta poderosa para renderizar listas de elementos em um aplicativo React Native. Com ele, é possível exibir listas dinâmicas e longas de forma eficiente, melhorando a experiência do usuário. É importante entender as propriedades do FlatList e como usá-las para personalizar a aparência e o comportamento da lista. Com o conhecimento adequado, os alunos de ensino técnico podem criar aplicativos móveis sofisticados e funcionais usando o FlatList.

Exemplos de uso da o componente FlatList

O FlatList é um dos componentes mais versáteis do React Native e pode ser usado de várias maneiras para renderizar listas de dados. Aqui estão alguns exemplos diversificados de como utilizar o FlatList:

Exemplo 1: Listagem de Produtos

Suponha que você tenha uma lista de produtos e queira exibi-los em uma tela. Você pode utilizar o FlatList para renderizar esses produtos da seguinte maneira:

import { FlatList, View, Text, Image, StyleSheet } from 'react-native';

const products = [
  {
    id: 1,
    name: 'Product 1',
    price: 9.99,
    image: { uri: 'https://picsum.photos/id/1024/400/400' },
  },
  {
    id: 2,
    name: 'Product 2',
    price: 14.99,
    image: { uri: 'https://picsum.photos/id/1026/400/400' },
  },
  {
    id: 3,
    name: 'Product 3',
    price: 19.99,
    image: { uri: 'https://picsum.photos/id/1043/400/400' },
  },
  {
    id: 4,
    name: 'Product 4',
    price: 24.99,
    image: { uri: 'https://picsum.photos/id/1062/400/400' },
  },
  {
    id: 5,
    name: 'Product 5',
    price: 29.99,
    image: { uri: 'https://picsum.photos/id/1074/400/400' },
  },
];

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Image source={item.image} style={styles.image} />
    <Text style={styles.title}>{item.name}</Text>
    <Text style={styles.price}>${item.price}</Text>
  </View>
);

const App = () => (
  <FlatList
    data={products}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
    style={styles.container}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:40
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  price: {
    fontSize: 24,
  },
  image: {
    width: '100%',
    height: 200,
  },
});

export default App;

Exemplo 2: Listagem de Imagens com Paginação

Suponha que você queira exibir uma lista de imagens que estão armazenadas em um servidor e quer exibir apenas algumas imagens por vez, permitindo ao usuário navegar entre as páginas para ver mais imagens. Você pode utilizar o FlatList com a propriedade pagingEnabled para exibir a lista de imagens com paginação. Para paginar faça o gesto de arrastar para cima:

import { useState, useEffect } from 'react';
import { FlatList, Image, View, StyleSheet } from 'react-native';

const App = () => {
  const [images, setImages] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetch(`https://picsum.photos/v2/list?page=${page}&limit=10`)
      .then((response) => response.json())
      .then((data) => setImages(data))
      .catch((error) => console.error(error));
  }, [page]);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Image source={{ uri: item.download_url }} style={styles.image} />
    </View>
  );

  const handleEndReached = () => {
    setPage(page + 1);
  };

  return (
    <FlatList
      data={images}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
      numColumns={2}
      // habilita a paginação
      pagingEnabled={true}
      // define a função 'onEndReached' para carregar mais imagens quando o usuário chegar ao final da lista
      onEndReached={handleEndReached}
      // define a quantidade de pixels que o usuário precisa rolar a lista para que a função 'onEndReached' seja disparada
      onEndReachedThreshold={0.1}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f1f1',
  },
  contentContainer: {
    paddingVertical: 20,
    paddingHorizontal: 10,
  },
  item: {
    flex: 1,
    marginHorizontal: 5,
    marginVertical: 10,
    aspectRatio: 1,
  },
  image: {
    flex: 1,
    borderRadius: 5,
  },
});

export default App;

Exemplo 3: Listagem de Notícias

Suponha que você tenha uma lista de notícias e queira exibi-las em uma tela. Você pode utilizar o FlatList para renderizar essas notícias da seguinte maneira:

import { FlatList, View, Text, Image, StyleSheet } from 'react-native';

const news = [
  {
    id: 1,
    title:
      'Casos de covid no mundo ultrapassam 400 milhões com domínio global da ômicron',
    summary:
      'A Organização Mundial da Saúde (OMS) alertou nesta segunda-feira que o número de casos de covid-19 no mundo ultrapassou a marca de 400 milhões, com o domínio global da variante ômicron do vírus.',
  },

  {
    id: 2,
    title:
      'França decreta novo confinamento para conter segunda onda da Covid-19',
    summary:
      'A França decretou novo confinamento a partir desta quinta-feira (10) para conter a segunda onda da Covid-19 que, segundo o primeiro-ministro francês, Jean Castex, é mais forte que as anteriores.',
  },

  {
    id: 3,
    title: 'Nasa acha componente do plástico em lua de Saturno',
    summary:
      'A sonda espacial Cassini encontrou fragmentos de plástico em Titã, uma das luas de Saturno, mostrando que a poluição causada pelo homem pode chegar a lugares muito distantes.',
  },

  {
    id: 4,
    title: 'Nasa pousa sonda em asteroide e coleta amostras da rocha',
    summary:
      'A sonda OSIRIS-REx da Nasa pousou no asteroide Bennu na noite desta terça-feira (20) e coletou amostras da rocha espacial. Esta é a primeira vez que uma missão da Nasa tenta coletar amostras de um asteroide.',
  },
];

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{item.title}</Text>
    <Text style={styles.summary}>{item.summary}</Text>
  </View>
);

const App = () => (
  <FlatList
    data={news}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
    style={styles.container}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:30
  },
  item: {
    backgroundColor: '#fff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  summary: {
    fontSize: 18,
  },
  image: {
    width: '100%',
    height: 200,
    borderRadius: 10,
    marginBottom: 10,
  },
});

export default App;

Exercícios com solução

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

Listagem 1

import { View, FlatList, Text } from 'react-native';
function ListaItens() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
  ];

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
    />
  );
}
export default ListaItens;

Listagem 2

const renderItem = ({ item }) => (
  <View style={{ backgroundColor: 'lightblue', marginVertical: 5, padding: 10, borderRadius: 5 }}>
    <Text>{item.title}</Text>
  </View>
);

Listagem 3

const renderItem = ({ item }) => (
  <Pressable onPress={() => Alert.alert('Item Pressionado', `ID: ${item.id}, Título: ${item.title}`)}>
    <View style={{ backgroundColor: 'lightblue', marginVertical: 5, padding: 10, borderRadius: 5 }}>
      <Text>{item.title}</Text>
    </View>
  </Pressable>
);

Listagem 4

Parte 1: Objetos

O que são Objetos?

Em JavaScript, um objeto é um conjunto de valores que representam as características de alguma coisa. Cada característica é definida por um par chave-valor. Objetos são muito úteis para armazenar e organizar dados de forma estruturada.

Exemplo:

const usuario = {
  nome: 'João',
  idade: 30,
  email: 'joao@example.com',
  ativo: true
};

Aqui, o objeto usuario possui quatro características : `nome`, `idade`, `email`, e `ativo`.

Manipulação de Objetos

Você pode acessar, adicionar ou modificar características de objetos de forma bastante simples:

• Acessando uma característica:

console.log(usuario.nome); // João

• Adicionando uma nova característica:

usuario.endereco = 'Rua A, 123';

• Modificando uma característica existente:

usuario.idade = 31;

Exercícios sobre Objetos

Parte 2: Arrays

O que são Arrays?

Arrays são listas ordenadas de valores, que podem ser de qualquer tipo (números, strings, objetos, etc.). Eles são extremamente úteis para armazenar coleções de dados.

Exemplo:

const frutas = ['maçã', 'banana', 'laranja'];

Aqui, `frutas` é um array que contém três strings.

Manipulação de Arrays

Assim como em objetos, você pode acessar, adicionar e modificar elementos em um array:

• Acessando um elemento:

console.log(frutas[0]); // maçã

• Adicionando um novo elemento:

frutas.push('uva');

• Modificando um elemento existente:

frutas[1] = 'abacaxi';

Métodos Comuns de Arrays

forEach

Executa uma função para cada elemento do array. Útil para iterar sobre arrays.

frutas.forEach(fruta => {
  console.log(fruta);
});

map

Cria um novo array com os resultados de uma função aplicada a cada elemento do array original.

const frutasEmMaiusculas = frutas.map(fruta => fruta.toUpperCase());

filter

Cria um novo array com todos os elementos que passam em um teste especificado por uma função.

const frutasComA = frutas.filter(fruta => fruta.includes('a'));

reduce

Reduz um array a um único valor, aplicando uma função cumulativa.

const totalCaracteres = frutas.reduce((total, fruta) => total + fruta.length, 0);

Exercícios sobre Arrays

Parte 3: Combinação de Objetos e Arrays

Trabalhando com Arrays de Objetos

Em muitos casos, você terá arrays que contêm objetos. Isso é comum ao lidar com dados mais complexos, como listas de produtos, usuários, ou itens de tarefas.

Exemplo:

const produtos = [
  { nome: 'Camiseta', preco: 25 },
  { nome: 'Calça', preco: 50 },
  { nome: 'Tênis', preco: 100 }
];

Aqui, `produtos` é um array que contém três objetos, cada um representando um produto.

Manipulação de Arrays de Objetos

Você pode usar os métodos de array discutidos anteriormente (`map`, `filter`, `reduce`, etc.) para manipular esses arrays.

Exemplo usando `map`:

const nomesDosProdutos = produtos.map(produto => produto.nome);

Exemplo usando `filter`:

const produtosCaros = produtos.filter(produto => produto.preco > 30);

Exemplo usando `reduce`:

const precoTotal = produtos.reduce((total, produto) => total + produto.preco, 0);

Exercícios sobre Combinação de Objetos e Arrays

Parte 4: Destructuring e Spread/Rest Operators

Destructuring

Destructuring é uma maneira concisa de extrair valores de arrays ou propriedades de objetos e atribuí-los a variáveis.

Exemplo com Objetos:

const usuario = { nome: 'João', idade: 30 };
const { nome, idade } = usuario;

Exemplo com Arrays:

const numeros = [1, 2, 3];
const [primeiro, segundo, terceiro] = numeros;

Spread e Rest Operators

O operador `spread` (`...`) permite expandir um array ou objeto em elementos individuais. O operador `rest` (`...`) permite agrupar um número indefinido de elementos em um array.

Exemplo com Spread:

const numeros1 = [1, 2, 3];
const numeros2 = [4, 5, 6];
const todosNumeros = [...numeros1, ...numeros2];

Exemplo com Rest:

function soma(...numeros) {
  return numeros.reduce((total, numero) => total + numero, 0);
}

Exercícios sobre Destructuring e Spread/Rest Operators

Em um navegador da web, você pode criar links para várias páginas usando uma tag âncora <a>. Quando o usuário clica em um link, o URL é enviado para a pilha do histórico do navegador. Quando o usuário clica no botão voltar, o navegador exibe o item do topo da pilha do histórico, de modo que a página atual agora é a página visitada anteriormente.

O React Native não possui um conceito embutido de uma pilha de histórico global como um navegador da web; é aqui que a biblioteca React Navigation é útil. O navegador de pilha do React Navigation implementa uma maneira de seu aplicativo fazer a transição entre as telas e manter o histórico de navegação. Uma variação significativa entre como isso é executado em um navegador da Web e o React Navigation é que o navegador de pilha do React Navigation produz os gestos e animações que você precisaria em dispositivos Android e iOS ao navegar entre rotas ou telas na pilha.

Navigator Components

Existem 3 navegadores principais que acompanham o React Navigation, que são adequados para projetos baseados em iOS e Android.

Stack Navigator

Para configurar um navegador de pilha, declare um objeto de navegador de pilha por meio da função createStackNavigator. Depois os componentes Navigator e Screen podem ser usados ​​para incorporar e agrupar as telas desejadas.

import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function Home({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

Bottom Tabs Navigator

Possivelmente, o estilo mais comum de navegação em aplicativos móveis é a navegação baseada em guias. Podem ser guias na parte inferior da tela ou na parte superior da tela.

O exemplo a seguir demonstra como construir um navegador de guias inferiores:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="HomeScreen"
        screenOptions={{
          tabBarActiveTintColor: '#e91e63',
        }}>
        <Tab.Screen
          name="HomeScreen"
          component={HomeScreen}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />

        <Tab.Screen
          name="SettingsScreen"
          component={SettingsScreen}
          options={{
            tabBarLabel: 'Profile',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons
                name="account"
                color={color}
                size={size}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Navegador de gaveta

Outro navegador útil que permite que as telas sejam animadas de um lado da tela a ser revelada e animadas de volta quando fechadas.

import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Notifications() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications Screen</Text>
    </View>
  );
}

function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={Feed}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Notifications}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={Profile}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Nos capítulos seguintes temos tutorias com exercícios práticos para reforçar o aprendizado dos elementos utilizados para programar em React Native a navegação entre telas de apps.

Exercício 1: Stack Navigation

Crie um aplicativo React Native com uma navegação em pilha. O aplicativo deve ter duas telas: Home e Detalhes. Na tela Home, exiba um botão "Ir para Detalhes". Quando o botão for clicado, o aplicativo deve navegar para a tela Detalhes. Na tela Detalhes, exiba um botão "Voltar para Home". Ao clicar no botão, o aplicativo deve voltar para a tela Home.

Passo 1: Configuração da navegação em pilha

Abra o arquivo App.js e substitua o código existente pelo seguinte:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Passo 2: Criação das telas Home e Details

Crie um diretório src/screens e adicione os seguintes arquivos:

Arquivo src/screens/HomeScreen.js:

import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Ir para Detalhes"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

Arquivo src/screens/DetailsScreen.js:

import { View, Text, Button } from 'react-native';

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Tela de Detalhes</Text>
      <Button
        title="Voltar para Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
};

export default DetailsScreen;

Passo 3: Execução do aplicativo

Execute o aplicativo no seu dispositivo usando Expo.

Agora você deve ter um aplicativo React Native com navegação em pilha. A tela inicial exibirá o conteúdo da tela Home e um botão "Ir para Detalhes". Ao clicar no botão, o aplicativo navegará para a tela Detalhes, onde será exibido o conteúdo da tela e um botão "Voltar para Home". Ao clicar no botão, o aplicativo voltará

Exercício 2: Drawer Navigation

Crie um aplicativo React Native com uma navegação em gaveta (drawer). O aplicativo deve ter três telas: Home, Perfil e Configurações. Na tela Home, exiba um botão de menu que, quando clicado, abre o drawer com as opções "Perfil" e "Configurações". Ao selecionar uma opção no drawer, o aplicativo deve navegar para a tela correspondente. Adicione um botão "Voltar para Home" em cada tela para permitir a navegação de volta para a tela Home.

Passo 1: Importação dos componentes

No arquivo App.js, adicione as seguintes linhas no topo do arquivo:

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { HomeScreen } from './src/screens/HomeScreen'
import { ProfileScreen } from './src/screens/ProfileScreen'
import { SettingsScreen} from './src/screens/SettingsScreen'

Neste passo, estamos importando os componentes necessários para configurar a navegação em gaveta no nosso aplicativo. O createDrawerNavigator é um componente fornecido pelo pacote @react-navigation/drawer, que nos permite criar um menu de navegação em gaveta. O NavigationContainer é o componente de nível superior fornecido pelo pacote @react-navigation/native que envolve toda a nossa navegação.

Passo 2: Configuração das telas

Crie um diretório src/screens e adicione os seguintes arquivos:

Arquivo src/screens/HomeScreen

import { View, Text } from 'react-native';

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);

export default HomeScreen;

Arquivo src/screens/ProfileScreen

import { View, Text } from 'react-native';

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile Screen</Text>
  </View>
);

export default ProfileScreen;

Arquivo src/screens/SettingsScreen

import { View, Text } from 'react-native';

const SettingsScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Settings Screen</Text>
  </View>
);


export default SettingsScreen;

Neste passo, estamos criando três telas básicas: HomeScreen, ProfileScreen e SettingsScreen. Cada tela é um componente de função que retorna um JSX contendo um elemento View que exibe um texto.

Passo 3: Configuração do Drawer Navigator

No arquivo App.js, adicione o seguinte código para criar o componente do Drawer Navigator:

const Drawer = createDrawerNavigator();

const App = () => (
  <NavigationContainer>
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  </NavigationContainer>
);

export default App;

Neste passo, estamos criando um componente Drawer usando createDrawerNavigator() e configurando o initialRouteName para "Home". Em seguida, estamos adicionando as telas ao usando Drawer.Screen. Cada tela é mapeada pelo nome da tela e seu respectivo componente.

O NavigationContainer envolve o componente Drawer.Navigator e é responsável por fornecer o contexto de navegação para a nossa aplicação.

Passo 4: Execução do aplicativo

Agora, você terá um aplicativo com navegação em gaveta (drawer navigation). A tela inicial exibirá o texto "Home Screen". Ao tocar no ícone de menu no canto superior esquerdo, você verá as opções "Profile" e "Settings". Ao selecionar uma opção, o aplicativo navegará para a tela correspondente.

No início, o aplicativo exibe a tela "Home Screen". Ao tocar no ícone do menu no canto superior esquerdo, o menu em gaveta é exibido, mostrando as opções "Profile" e "Settings". Ao selecionar a opção "Profile", o aplicativo navega para a tela "Profile Screen". Da mesma forma, selecionar a opção "Settings" leva o aplicativo para a tela "Settings Screen". O usuário pode navegar entre as telas tocando nas opções do menu ou usando o botão voltar do dispositivo para retornar à tela anterior. Experimente tocar nas diferentes opções do drawer para ver a navegação em ação.

Exercício 3: Tab Navigation

Crie um aplicativo React Native com uma navegação em abas (tabs). O aplicativo deve ter três telas: Feed, Explorar e Notificações. Na parte inferior do aplicativo, exiba uma barra de navegação com as opções "Feed", "Explorar" e "Notificações". Ao selecionar uma opção na barra de navegação, o aplicativo deve exibir o conteúdo correspondente à tela selecionada. Adicione um botão "Voltar para Feed" em cada tela para permitir a navegação de volta para a tela Feed.

Passo 1: Configurando a navegação

Vamos criar as telas e configurar a navegação em abas. Crie um diretório chamado src na raiz do projeto. Dentro do diretório src, crie um diretório chamado screens.

Dentro do diretório screens, crie três arquivos: FeedScreen.js, ExploreScreen.js e NotificationsScreen.js. Esses arquivos conterão o código das respectivas telas.

Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

Arquivo App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FeedScreen from './src/screens/FeedScreen';
import ExploreScreen from './src/screens/ExploreScreen';
import NotificationsScreen from './src/screens/NotificationsScreen';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Feed" component={FeedScreen} />
        <Tab.Screen name="Explorar" component={ExploreScreen} />
        <Tab.Screen name="Notificações" component={NotificationsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

Aqui, importamos os componentes necessários do React Navigation e as telas que criamos. Em seguida, definimos um Tab.Navigator dentro do NavigationContainer. Dentro do Tab.Navigator, usamos Tab.Screen para definir as telas e seus respectivos nomes.

Passo 2: Implementando as telas

Agora, vamos implementar o código das telas.

Abra o arquivo FeedScreen.js dentro do diretório src/screens e adicione o seguinte código:

Arquivo src/screens/FeedScreen

import { View, Text, Button } from 'react-native';

const FeedScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
      <Button
        title="Explorar"
        onPress={() => navigation.navigate('Explorar')}
      />
    </View>
  );
};

export default FeedScreen;

Aqui, importamos os componentes necessários do React Native. A tela FeedScreen é uma função de componente que recebe o parâmetro navigation (usado para navegar entre as telas). No retorno da função, exibimos um texto simples e um botão que navega para a tela "Explorar" ao ser pressionado.

Repita o passo 2 para as telas ExploreScreen.js e NotificationsScreen.js. Use o código a seguir para as respectivas telas:

Arquivo src/screens/ExploreScreen.js

import { View, Text, Button } from 'react-native';

const ExploreScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Explore Screen</Text>
      <Button
        title="Voltar para Feed"
        onPress={() => navigation.navigate('Feed')}
      />
    </View>
  );
};

export default ExploreScreen;

Arquivo src/screens/NotificationsScreen.js:

import { View, Text, Button } from 'react-native';

const NotificationsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications Screen</Text>
      <Button
        title="Voltar para Feed"
        onPress={() => navigation.navigate('Feed')}
      />
    </View>
  );
};

export default NotificationsScreen;

Exercício 4: Personalizando o cabeçalho em um navegador Stack

Neste exercício, você irá personalizar o cabeçalho de um navegador Stack em um aplicativo React Native.

Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.

Arquivo src/screens/HomeScreen

import React from 'react';
import { View, Text } from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

Arquivo /App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Página Inicial',
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Stack.Navigator dentro do NavigationContainer. Dentro do Stack.Navigator, usamos Stack.Screen para definir a tela inicial, especificando opções de cabeçalho personalizadas.

Exercício 5: Personalizando o cabeçalho em um navegador Tab

Neste exercício, você irá personalizar o cabeçalho de um navegador Tab em um aplicativo React Native. Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.

Arquivo src/screens/HomeScreen

import { View, Text } from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Página Inicial',
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Tab.Navigator dentro do NavigationContainer. Definimos as opções de cabeçalho personalizadas no screenOptions do Tab.Navigator para serem aplicadas a todas as telas do navegador Tab.

Exercício 6: Personalizando o cabeçalho em um navegador Drawer

Neste exercício, você irá personalizar o cabeçalho de um navegador Drawer em um aplicativo React Native.

Crie um arquivo chamado HomeScreen.js no diretório src/screens. Este será o componente de tela inicial para o exemplo.

Arquivo src/screens/HomeScreen

import { View, Text } from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

Em seguida, abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './src/screens/HomeScreen';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        useLegacyImplementation
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Página Inicial',
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste código, importamos os componentes necessários do React Navigation e as telas. Em seguida, definimos um Drawer.Navigator dentro do NavigationContainer. Definimos as opções de cabeçalho personalizadas no screenOptions do Drawer.Navigator para serem aplicadas a todas as telas do navegador Drawer.

Exercício 7: Navegação aninhada com Stack Navigator dentro de um Tab Navigator

Neste exercício, você irá criar uma navegação aninhada com um Stack Navigator dentro de um Tab Navigator em um aplicativo React Native.

Passo 1: Criando as telas

Crie os seguintes arquivos para as telas dentro do diretório src/screens:

HomeScreen.js:

import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js:

import { View, Text, Button } from 'react-native';

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
};

export default DetailsScreen;

ProfileScreen.js:

import { View, Text, Button } from 'react-native';

const ProfileScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go back to Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
};

export default ProfileScreen;

Passo 2: Configurando a navegação aninhada

Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';
import ProfileScreen from './src/screens/ProfileScreen';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="HomeStack" component={HomeStack} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste código, importamos os componentes necessários do React Navigation, as telas e criamos os navegadores Tab e Stack. O navegador Stack contém as telas Home e Details, enquanto o navegador Tab contém o navegador Stack HomeStack e a tela Profile.

Exercício 8: Navegação aninhada com Stack Navigator dentro de um Drawer Navigator

Neste exercício, você irá criar uma navegação aninhada com um Drawer Navigator dentro de um Stack Navigator em um aplicativo React Native.

Passo 1: Criando as telas

Crie os seguintes arquivos para as telas dentro do diretório src/screens:

HomeScreen.js:

import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js:

import { View, Text } from 'react-native';

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;

ProfileScreen.js:

import { View, Text } from 'react-native';

const ProfileScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
};

export default ProfileScreen;

Passo 2: Configurando a navegação aninhada

Abra o arquivo App.js na raiz do projeto e substitua o conteúdo pelo seguinte código:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';
import ProfileScreen from './src/screens/ProfileScreen';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator useLegacyImplementation>
        <Drawer.Screen name="HomeStack" component={HomeStack} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste código, importamos os componentes necessários do React Navigation, as telas e criamos os navegadores Stack e Drawer. O navegador Stack contém as telas Home e Details, enquanto o navegador Drawer contém o navegador Stack HomeStack e a tela Profile.

Exercicio 9

Criar um app com o seguinte esquema de navegação