Каков наилучший способ сделать так, чтобы нативные страницы stati c реагировали одинаково на всех устройствах? - PullRequest
Новая
       18

Каков наилучший способ сделать так, чтобы нативные страницы stati c реагировали одинаково на всех устройствах?

1 голос
/ 05 апреля 2020

Я работаю над небольшим реактивным родным приложением. Одна из страниц - stati c и состоит из множества картинок и текста. Я использую реактивную нативную бумагу, где на каждой карточке есть заголовок и картинка, а иногда и абзац текста.

Я столкнулся с проблемой, из-за которой изображения будут хорошо смотреться на моем Pixel 4XL, но будут обрезаны на моем iPad Pro. Я попытался следовать руководству, в котором учитывалось бы, какое устройство использовалось, и масштабировать карточку и обложку (сам рисунок), чтобы подогнать его под размер, но, похоже, оно не работает так, как я хочу. Все карты имеют стиль cardTest , а все обложки имеют стиль pictureTest .

Первая карта на iPad Pro

Первая карта на пикселе 4XL 

const { width, height } = Dimensions.get("window");

const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
.
.
.
cardTest: {
    width: moderateScale(550),
    height: verticalScale(275),
    padding: scale(10)
  },

pictureTest: {
    width: moderateScale(380, 0.3),
    height: verticalScale(230, 0.5)
  },

Любая помощь или общие отзывы будут оценили!

1 Ответ

0 голосов
/ 08 апреля 2020

Вы захотите настроить переменные ширины / высоты так, чтобы они динамически реагировали на размер экрана. Самый простой способ сделать это - использовать значения в процентах для ширины / высоты, например, width: '60%', чтобы занять 60% ширины экрана устройства. Есть некоторые предостережения в отношении этого подхода. Рендеринг в процентах на основе ширины может выглядеть ОЧЕНЬ по-разному для маленьких / больших устройств.

Еще один метод для достижения этого типа макета заключается в использовании flexbox. Подобно CSS flexbox, в React Native есть система для создания макетов flex. Вы можете прочитать больше об этом здесь . Сочетание flexbox с размерами элементов в процентах, вероятно, является лучшим выбором для обеспечения согласованности между устройствами.

...