Executando verificação de segurança...
Em resposta a Como desenvolver em React Native de forma responsiva? (Dúvida)
1
gturcheti

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

Carregando publicação patrocinada...
1
FelipeTomazetti

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
gturcheti
Autor
Autor

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