Стилизация компонентов в React Native отличается от традиционного CSS в веб-разработке. Вместо внешних таблиц стилей или классов здесь используются JavaScript-объекты, которые описывают стили и передаются напрямую в компоненты через проп style. Синтаксис похож на CSS, но с некоторыми особенностями: свойства пишутся в camelCase, значения в основном числовые или строковые, а единицы измерения (например, px) не указываются.

Основной способ: объект стилей через StyleSheet.create

Компонент StyleSheet из react-native используется для объявления и структурирования стилей.

import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Привет, мир!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2',
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: '#333',
fontSize: 24,
fontWeight: 'bold',
},
});

Преимущества StyleSheet.create:

• Валидирует свойства на этапе разработки.

• Чуть быстрее, чем "чистый объект" (благодаря предварительной оптимизации).

• Упрощает переиспользование и организацию кода.

Альтернативный способ: inline-стили

Можно использовать обычные объекты прямо внутри JSX:

<View style={{ padding: 20, backgroundColor: 'lightblue' }}>
<Text style={{ fontSize: 18, color: 'darkblue' }}>Inline стиль</Text>
</View>

Подходит для коротких, динамически формируемых стилей, но не рекомендуется для масштабных приложений из-за снижения читаемости.

Синтаксис: как писать стили в React Native

• Все свойства пишутся в camelCase: backgroundColor, fontSize, textAlign.

• Числовые значения (например, padding: 10) интерпретируются как dp (density-independent pixels).

• Строковые значения для цветов ('#fff', 'red') и некоторых других свойств допустимы.

• Нельзя использовать сложные селекторы (как в CSS: .class1:hover, div > p и т.д.).

Примеры популярных стилей

const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: '#3498db',
margin: 10,
padding: 10,
borderWidth: 2,
borderColor: '#2980b9',
borderRadius: 8,
},
text: {
color: '#fff',
fontSize: 16,
textAlign: 'center',
fontWeight: '600',
},
});

Flexbox в React Native

React Native полностью основан на Flexbox-модели, в отличие от веба, где доступно больше моделей позиционирования (grid, float и т.д.).

Основные свойства Flexbox:

Пример с Flexbox:

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'green' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
</View>

Цвета

React Native поддерживает:

• строковые цвета ('red', 'blue');

• шестнадцатеричные цвета ('#ff0000');

• rgba ('rgba(255, 0, 0, 0.5)');

• transparent.

Комбинирование стилей

Стили можно объединять в массив:

<Text style={\[styles.text, styles.bold, { color: 'blue' }\]} />

Порядок важен: последние переопределяют предыдущие. Это удобно для условной стилизации:

<Text style={\[styles.text, isActive && styles.active\]} />

Если isActive === false, то false игнорируется.

Условные стили

const textColor = isError ? 'red' : 'green';
<Text style={{ color: textColor }} />

Или с StyleSheet:

<Text style={\[styles.base, isError && styles.error\]} />

Псевдоклассы (hover, active) и медиа-запросы

React Native не поддерживает стандартные псевдоклассы, как в CSS. Но можно эмулировать их с помощью состояния:

const \[pressed, setPressed\] = useState(false);
<TouchableOpacity
onPressIn={() => setPressed(true)}
onPressOut={() => setPressed(false)}
style={\[styles.button, pressed && styles.pressed\]}
\>
&lt;Text&gt;Кнопка&lt;/Text&gt;
&lt;/TouchableOpacity&gt;

Адаптивные стили

Использование Dimensions:

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

Можно задавать размеры в зависимости от ширины экрана:

width: width > 400 ? 300 : 200

Platform:

Чтобы задать стили для разных платформ:

import { Platform } from 'react-native';
const styles = StyleSheet.create({
container: {
paddingTop: Platform.OS === 'ios' ? 40 : 20,
},
});

Библиотеки для стилизации

1. Styled-components (CSS-in-JS для React Native)

npm install styled-components
import styled from 'styled-components/native';
const Box = styled.View\`
background-color: papayawhip;
padding: 20px;
\`;
const Title = styled.Text\`
font-size: 18px;
color: palevioletred;
\`;
function App() {
return (
<Box>
<Title>Привет!</Title>
</Box>
);
}

Позволяет использовать синтаксис, близкий к обычному CSS.

2. Tailwind для React Native (например, NativeWind)

Tailwind-подобный стиль:

npm install nativewind
import { Text, View } from 'react-native';
import { styled } from 'nativewind';
const StyledView = styled(View);
const StyledText = styled(Text);
<StyledView className="bg-blue-500 p-4">
<StyledText className="text-white text-lg">Привет</StyledText>
</StyledView>

Позволяет писать стили как классы.

Анимации и стили

Некоторые стили можно анимировать с помощью:

• Animated.Value, Animated.timing

• LayoutAnimation

• Reanimated (популярная библиотека для плавных и сложных анимаций)

Безопасность и производительность

• Лучше использовать StyleSheet.create — он предотвращает ошибки, валидирует свойства и оптимизирует производительность.

• Не рекомендуется передавать новый объект в style на каждом рендере, т.к. это создаёт лишнюю работу для React:

// плохо:
<View style={{ padding: 10 }} />
// лучше:
const styles = StyleSheet.create({ pad10: { padding: 10 } });
<View style={styles.pad10} />

Инструменты и отладка

• Используйте React Native Debugger или Flipper для просмотра стилей.

• Можно временно задать яркие цвета (backgroundColor: 'red') для отладки контейнеров и layout'ов.

React Native предоставляет мощную, но упрощённую систему стилизации, полностью интегрированную в JavaScript. Хотя она отличается от CSS в веб-разработке, её логика становится интуитивной после освоения базовых концепций Flexbox и декларативного подхода к стилям.