В соответствии с собственной документацией React:
Вы не используете специальный язык или синтаксис для определения стилей. Вы просто разрабатываете свое приложение, используя JavaScript. Все основные компоненты поддерживают стиль с именем prop. Имена и значения стилей обычно совпадают с тем, как CSS работает в сети, за исключением того, что имена пишутся с использованием верблюжьей оболочки, например, backgroundColor
, а не background-color
.
Свойство style
может быть простым старым объектом JavaScript.
По мере усложнения компонента часто бывает удобнее использовать StyleSheet.create
для определения нескольких стилей в одном месте. Вот пример:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
И, конечно, стили не обязательно должны находиться в одном файле с компонентом. Вы можете абстрагировать их в отдельный файл, а затем просто экспортировать их оттуда и импортировать при необходимости.