Pular para o conteúdo principal

Questão de Programação — Web — FCC 2024

ProgramaçãoWeb
Código
fc072147
Banca
FCC
Órgão
TRT - 20ª REGIÃO (SE)
Ano
2024
Nível
Superior
Cargo
Técnico Judiciário - Área Apoio Especializado - Especialidade Tecnologia da Informação
Em um aplicativo móvel criado utilizando React Native, em condições ideais, um desenvolvedor precisa que um botão ocupe a largura total da tela, tenha um fundo azul e o texto branco centralizado. Para estilizar o botão no React Native, ele deve
  1. Ausar o objeto StyleSheet.create com propriedades como width: '100%', backgroundColor: 'blue" e color: 'white'.
  2. Busar classes CSS tradicionais no arquivo .css vinculado ao componente com width: '100%", backgroundColor: blue e color: #000000.
  3. Cadicionar os estilos width: 'auto', backgroundColor: 'blue' e color: '#' dentro do próprio arquivo JavaScript separado e importar como CSS.
  4. Dusar o atributo style diretamente no componente com as propriedades CSS width: auto, background-color: blue e color: #FFF.
  5. Eusar className, adicionar uma classe para os estilos no componente e formatar a classe com width: 'auto', backgroundColor: 'blue' e color: '#fffff'.
Revelar gabarito e comentário

GabaritoA — usar o objeto StyleSheet.create com propriedades como width: '100%', backgroundColor: 'blue" e color: 'white'.

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

Estilização em React Native

Gabarito: letra A. No React Native, a estilização é feita através de objetos JavaScript, e não com CSS tradicional. A forma correta e recomendada é usar StyleSheet.create com propriedades no formato camelCase. A alternativa A utiliza width: '100%', backgroundColor: 'blue' e color: 'white', que atendem exatamente aos requisitos: largura total, fundo azul e texto branco centralizado.

A banca testa o conhecimento de que React Native não utiliza CSS, classes ou seletores. É comum que candidatos confundam com desenvolvimento web, caindo em alternativas que usam className, background-color ou arquivos .css.

Estilização React Native
  • 1Forma correta
    • Objeto JavaScript
    • camelCase (backgroundColor, color)
    • StyleSheet.create (recomendado)
  • 2Formas incorretas
    • CSS tradicional (.css, classes)
    • className
    • background-color (hífen)
    • width: auto
LEVEL · soulevel.com.br

Alternativa A — ✅ Correta ⟵ GABARITO

Utiliza StyleSheet.create com as propriedades corretas: width: '100%' (largura total), backgroundColor: 'blue' (fundo azul) e color: 'white' (texto branco). Todas no formato camelCase, como exige o React Native.

Alternativa B — ❌ Incorreta

Propõe usar classes CSS tradicionais em um arquivo .css vinculado ao componente. Recurso exclusivo da web; React Native não interpreta CSS.

Alternativa C — ❌ Incorreta

Além de usar width: 'auto' (que não preenche a tela), o valor de color está inválido ('#'). A forma de importar também é equivocada.

Alternativa D — ❌ Incorreta

Usa o atributo style diretamente, mas com propriedades CSS (hífen) como background-color, que não existem em React Native. O correto seria backgroundColor. Além disso, width: auto não atende à largura total.

Alternativa E — ❌ Incorreta

Utiliza className, que não tem efeito em React Native. O correto é passar um objeto style ou usar StyleSheet.create.

NÃO CAIA NESSA!

A banca explora a diferença entre CSS (web) e o modelo de estilização do React Native. Muitos candidatos escolhem alternativas que funcionariam em HTML/CSS, mas não em React Native. Lembre: no React Native, os estilos são objetos JavaScript com propriedades em camelCase (backgroundColor, color, etc.), e nunca se usa classes, IDs ou seletores CSS.

Gabarito: letra A

Link permanente: /questoes/fc072147