Стиль

В React Native вы стилизуете ваше приложение с помощью JavaScript. Все основные компоненты принимают свойство, названное style. Имена стилей и значения обычно соответствуют тому, как работает CSS в веб-приложениях, за исключением того, что имена написаны с использованием верблюжьего регистра, например backgroundColor вместо background-color.

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

По мере усложнения компонента зачастую удобнее использовать StyleSheet.create для определения нескольких стилей в одном месте. Вот пример:

Один распространенный шаблон — сделать ваш компонент принимающим свойство style, которое в свою очередь используется для стилизации подкомпонентов. Вы можете использовать это, чтобы сделать стили «каскадными» так же, как и в CSS.

Существует множество других способов настроить стиль текста. Обратитесь к справочнику компонента Text для получения полного списка.

Теперь вы можете сделать свой текст красивым. Следующим шагом в освоении мастерства стилей является изучение управления размером компонентов.

Известные проблемы

• react-native#29308: В некоторых случаях React Native не соответствует тому, как работает CSS в веб-приложениях, например, область касания никогда не выходит за пределы границ родительского представления, а отрицательные отступы на Android не поддерживаются.