Executando verificação de segurança...
1

Como desenvolver em React Native de forma responsiva? (Dúvida)

Bom dia pessoal, tudo bem?

Recentemente eu assumi o desenvolvimento do zero de um projeto em React Native, porém enquanto eu desenvolvia, fui realizar testes em diferentes dispositivos, com resoluções diferentes e reparei que meus componentes, telas, estão quebrando, não estão se adaptando ao tamanhos dos devices.

Gostaria aqui de pedir ajuda da comunidade para que eu possa entender como posso transformar o desenvolvimento que já fiz, e a continuação, em algo responsivo. Como estou trabalhando com React Native tem pouco tempo, não conheço bibliotecas ou ferramentas de boas práticas de uso para tornar meu desenvolvimento responsivo.

Desde já agradeço a contribuição de todos para contruírmos uma comunidade fod@ em homenagem do Deschamps.

Carregando publicação patrocinada...
1

Opa beleza? Estou acostumado a utilizar o 'styled-components' para fazer meus componentes, e acredito que a melhor forma de abordar a "responsividade" é você usar e abusar do 'flex-box'. Dessa forma vc consegue definir o alinhamento dos componentes e o preenchimento do espaço disponível em tela.

Para imagens tb é interessante definir o tamanho utilizando o PixelRatio c/ 'getPixelSizeForLayoutSize', que considera a densidade de pixels do dispositivo que está exibindo.

dê uma olhadinha nesses links:
https://www.alura.com.br/artigos/css-guia-do-flexbox
https://reactnative.dev/docs/height-and-width
https://reactnative.dev/docs/flexbox
https://reactnative.dev/docs/pixelratio

1

Você usa as medidas em % ou normais? Exemplo

container : { height: 52, width: 346 }
ou

container: { height: '15%', width: '70%' }

Pergunto porque eu uso os números inteiros ao invés de porcentagem, o que eu acho que pode acabar sendo o problema, porque se eu configuro uma width e height específica, se a tela for menor do que o que eu configurei, vai quebrar, correto?

1

Então, em container eu raramente uso essas medidas. Normalmente eu uso o "flex 1" para o container ocupar o espaço disponível ou no máximo um width 100%. Acho mais prático definir no container as props de alinhamento, margem, padding e deixo para definir o "tamanho" nos elementos mesmo (uma imagem, um ícone e etc...).

Mas é isso mesmo, se vc exceder o espaço disponivel em tela sem permitir o scroll, vai quebrar!

1