Camada de Apresentação

Introdução

A camada de apresentação é composta dos componentes React que representam as telas da aplicação.

Para navegação entre telas sugere-se o framework React Navigation.

Estrutura de Arquivos

As telas, nos padrões da presente arquitetura, ficam localizadas dentro da pasta app/screens, dedicada à camada de apresentação. A pasta pode conter subníveis, conforme necessidade, para representar a estrutura de navegação ou organização das telas.

Exemplo de conteúdo da pasta app/screens:

ajustes/
   ajustesScreen.js
apoio/
   apoioScreen.js
executores/
   executoresScreen.js
home/
   homeScreen.js
   atestarOrdemServico/
      atestarOrdemServicoScreen.js
   cancelarOrdemServico/
      cancelarOrdemServicoScreen.js
   ...

Telas

Implementar cada tela na forma de um componente React, conforme as diretrizes:

• Declarar em módulo JavaScript com sufixo Screen.

• Evitar dois ou mais componentes de tela na mesma pasta.

• Evitar a implementação de regras de negócio, que é função do backend, com exceção de redundâncias para fins de UX, especialmente validações de formulários.

• Evitar componentes React com mais de 200 linhas de código.

  • Prefira dividí-los em componentes menores. Para melhor legibilidade, estes componentes ficam localizados no mesmo diretório da página.

• Não consumir webservices diretamente na página.

  • Deve-se implementar o consumo na camada de integração, na forma de serviço remoto, e importar a função correspondente na página. Consulte a seção de Integração para mais informações.

Sugere-se o seguinte template de código para um componente React de tela:

import React from 'react';

// Demais imports

const ExemploScreen = ({ navigation }) => {
  
    // Hooks

    // Refs
    
    // States

    // Funções de apoio

    // Funções de eventos de UI

    // Effects

    return (
        <>            
            {/* Elementos da página */}
        </>
    );
}

export { ExemploScreen };

Componentes de UI

Consulte o código-fonte do aplicativo móvel Showcase da arquitetura, que demonstra todos os componentes de UI da biblioteca react-native-cloudsupport.

Veja algumas imagens do aplicativo de showcase:

Próximos Passos

A próxima leitura sugerida é a seção Integração, que detalha o consumo de serviços do backend.

A seção Documentação da API contém a referência completa de todos os módulos e componentes da arquitetura.