Реагировать на масштабирование собственного представления - PullRequest
Новая
       9

Реагировать на масштабирование собственного представления

0 голосов
/ 14 января 2020

Таким образом, я разрабатываю кроссплатформенное приложение React Native, приложение использует множество изображений в качестве кнопок в соответствии с требованиями дизайна, которым необходимо задать начальную высоту и ширину, чтобы их правильные значения ios были правильными. Оттуда я создал компоненты, которые используют эти кнопки изображений, а затем разместил эти компоненты на главном экране. Я могу заставить вещи выглядеть идеально на одном экране, используя вершины и левые / права, чтобы расположить компоненты в соответствии с заданными мне требованиями к дизайну.

Проблема, с которой я столкнулся, теперь масштабируется этот главный экран для разных размеров экрана. Я в основном масштабирую x и y через свойство transform для самого родительского представления как такового. transform: [{ scaleX: .8 }, { scaleY: .8 }] После написания функции масштабирования, которая учитывает базовую высоту и текущую высоту, этот подход работает для фактического размера вещей, но мое позиционирование все в порядке.

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

Есть ли способ позиционировать вид, используя вершины и левые / права, заблокировать его, а затем масштабировать, как изображение?

Ответы [ 2 ]

1 голос
/ 18 января 2020

В итоге я просмотрел все виды и преобразовал все, что использовало жестко запрограммированный пиксель высоты и ширины, чтобы установить ширину, а затем использовал свойство aspectRatio и присвоил ему жестко запрограммированные высоту и ширину. Это наряду с реализацией функции масштабирования, которая дала мне долю самого большого представления, скажем 0,9, а затем масштабирование основного вида с использованием преобразования. Люди не шутят, когда говорят, что этот отзывчивый интерфейс сложен.

1 голос
/ 14 января 2020

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

import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const screenSize = Math.sqrt(width * height) / 100;


const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) =>
size + (scale(size) - size) * factor;


export { scale, verticalScale, moderateScale, screenSize };

Затем вы можете импортировать их и использовать в ваших компонентах. Существуют различные типы весов, вы можете попробовать и увидеть лучший для ваших компонентов. Надеюсь, это поможет.

...