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

Style

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

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

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

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

Существует множество других способов настройки стиля текста. Полный список смотрите в Text component reference.

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

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

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

Комментарии