2016-03-13 3 views
6

Я только что построил самое безумно удивительное сложное приложение в течение последних 6 месяцев для iOS и Android с использованием React native.React Native: Как мне управлять размером экрана 9000 Android?

Все шло идеально, и все работает прекрасно ...

Я разработал для iPhone 4s, 5, 6, 6+, используя специальный компонент, который я написал, который в основном работает как ...

override: { 
    ip4: { fontSize: 8 }, 
    ip5: { fontSize: 10 } 
} 

и т.д.

Это на самом деле работало идеальный для прошивки.

Сегодня я открыл GA и был в ужасе, осознав, что забыл стиль Android. Я посмотрел на нашу аналитику Google, и есть буквально ... 700 размеров экрана, которые все разные.

Я совершенно смущен перспективой проектирования для всех этих целей, особенно учитывая, что они имеют многократную плотность пикселей.

Мой вопрос, что же я на самом деле сделать, чтобы объяснить ...

  • наценки/расстояниями (в основном общих чисел для заполнения или любой другой)
  • размеры шрифта

Это 2 вещи, которые я очень смущен, как обрабатывать все различные комбинации.

Я взглянул на PixelRatio, но я понятия не имею, как его использовать или даже если я на правильном пути.

Как большинство людей справляются с этим?

+1

подтвердил это надеясь, что будет разумный ответ. Вы разработали решение? –

ответ

0

Вы можете использовать как размеры, так и PixelRatio для получения размеров экрана и пикселей. Я использую это, например, чтобы установить изменение размера изображения в зависимости от размера экрана ..

Например:

import Dimensions from 'Dimensions'; 
import PixelRatio from 'PixelRatio'; 

var {height, width} = Dimensions.get('window'); 
var pixelr = PixelRatio.get(); 

// Calculate styles, heights, fontsizes based on the numbers above 
+0

Можете ли вы завершить ответ, никто не знает, как использовать PixelRatio для iOS и Android. Вы сделали это сами? – SudoPlz

+0

@SudoPlz просто умножить на пиксель. – Hobbyist

0

Вы можете использовать медиа-запросы для управления экранами различных размеров, я был использовать медиа-запросы концепция моя фонотека (кордова) на ранней стадии развития.

меня найти на уроке при поиске, я думаю, что это полезно,

https://www.npmjs.com/package/react-native-responsive

0

Мы закончили TYO использование flexboxes вокруг приложения. Таким образом, контент размещается, когда доступно пространство.

Конечно, мы потеряли целые дни на испытаниях и испытаниях

Смежные вопросы