Перейти к содержанию

StyleSheet

StyleSheet — это абстракция, аналогичная таблицам стилей CSS.

Советы по качеству кода:

  • Перенося стили из функции рендеринга, вы облегчаете понимание кода.
  • Именование стилей — хороший способ придать смысл компонентам низкого уровня в функции рендеринга.

Методы

compose()

1
static compose(style1: Object, style2: Object): Object | Object[];

Объединяет два стиля таким образом, что style2 переопределяет все стили в style1. Если один из стилей является ложным, возвращается другой без выделения массива, что экономит выделение и сохраняет равенство ссылок при проверке PureComponent.

create()

1
static create(styles: Object): Object;

Создает ссылку стиля StyleSheet из заданного объекта.

flatten()

1
static flatten(style: Object[]): Object;

Сплющивает массив объектов стиля в один объединенный объект стиля. Также этот метод можно использовать для поиска идентификаторов, возвращаемых функцией StyleSheet.register.

Примечание

Соблюдайте осторожность, так как злоупотребление этим может привести к оптимизации. Идентификаторы позволяют оптимизировать работу моста и памяти в целом. Прямое обращение к объектам стиля лишит вас этих оптимизаций.

Этот метод использует StyleSheetRegistry.getStyleByID(style) для разрешения объектов стиля, представленных идентификаторами. Таким образом, массив объектов стиля (экземпляры StyleSheet.create()), индивидуально разрешаются в соответствующие объекты, объединяются как один и затем возвращаются. Это также объясняет альтернативное использование.

setStyleAttributePreprocessor()

Экспериментально

Изменения будут происходить часто и не будут достоверно объявлены. Все это может быть удалено, кто знает? Используйте на свой страх и риск.

1
2
3
4
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

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

Свойства

absoluteFill

Очень распространенным шаблоном является создание оверлеев с абсолютной позицией и нулевым позиционированием (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), поэтому absoluteFill можно использовать для удобства и уменьшения дублирования этих повторяющихся стилей. Если вы хотите, absoluteFill можно использовать для создания настраиваемой записи в таблице стилей, например:

absoluteFillObject

Иногда вам может понадобиться absoluteFill, но с некоторыми изменениями — absoluteFillObject можно использовать для создания настраиваемой записи в StyleSheet, например:

hairlineWidth

Определяется как ширина тонкой линии на платформе. Она может использоваться в качестве толщины границы или разделения между двумя элементами. Пример:

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

Линия шириной с волосок может быть не видна, если ваш симулятор уменьшен.

Комментарии