StyleSheet

StyleSheet — это абстракция, аналогичная CSS StyleSheets

Рекомендации по качеству кода:

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

Справочник

Методы

compose()

static compose(style1: object, style2: object): object | array<object>

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

create()

static create(obj: object): object

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

flatten()

static flatten(style: array<object>): object

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

ПРИМЕЧАНИЕ: Будьте осторожны, так как злоупотребление этим может нанести ущерб оптимизациям. Идентификаторы позволяют оптимизировать работу через мост и память в целом. Прямое обращение к объектам стиля лишит вас этих оптимизаций.

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

setStyleAttributePreprocessor()

ПРЕДУПРЕЖДЕНИЕ: ЭКСПЕРИМЕНТАЛЬНО. Вероятно, произойдет много изменений, и о них не будет надёжно сообщаться. Вся эта штука может быть удалена, кто знает? Используйте на свой страх и риск.

static setStyleAttributePreprocessor(property: string, process: (propValue: any) => any)

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

Свойства

absoluteFill

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

absoluteFillObject

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

hairlineWidth

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

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

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

absoluteFill против absoluteFillObject

В настоящее время нет различий между использованием absoluteFill и absoluteFillObject.