Какова единица стиля по умолчанию в React Native?

Я участвую в проекте с открытым исходным кодом, где я разрабатываю дизайн материалов для React Native. Я заблокирован на работе, я не могу сделать некоторые улучшения уровня пользовательского интерфейса w.r.t. отступы, выравнивание и т.д.,

Это официальная спецификация дизайна материалов для ящика -

В приведенном выше изображении измерение UNIT dp.

Но, в моем реагентном коде React, я вижу, что таких единиц не упоминается. Учитывая, что это "реагировать на родной", я смущен, является ли он px или dp.

Я даже просмотрел официальные документы компонент React Native для Style. Я нигде не вижу упоминания.

Мой код выглядит как

const styles = {
    touchable: {
        paddingHorizontal: 16,
        marginVertical: 8,
        height: 48
    },
    item: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        position: 'relative',
    },
    value: {
        flex: 1,
        paddingLeft: 34,
        top: 2
    },
    label: {
        top: 2
    }
},

Пожалуйста, скажите мне, если это пиксели или dp? А также, 1px = 1dp?

Ответы

Ответ 1

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

Я не знаком с модулем "dp", но из того, что я собираю width: 1, по-разному отображает на каждом устройстве в зависимости от плотности пикселей экрана (см. ссылку). Информация, содержащаяся в реакционных документах, говорит, что 1 будет отображаться на экранах с высокой плотностью пикселей. Который тогда звучит логично, поскольку у вас больше точности на экранах с высокой плотностью, чем на экранах с низкой плотностью, а также на основе реагирования - на универсальность, поэтому он не будет принимать высокие значения dpi.

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

https://facebook.github.io/react-native/docs/pixelratio.html#content

Ответ 2

Из docs:

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

Итак, единицы в React Native находятся в dp. Если вы хотите преобразовать их в пиксели, используйте PixelRatio.getPixelSizeForLayoutSize()

Ответ 3

Из того, что я знаю, стиль javascript, который мы используем в реакции js или реагируем на собственные, использует пиксели. Коэффициент пикселей необходим только для поддержки различных экранов мобильных устройств.

Ответ 4

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

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