Мобильная разработка
Курс по React Native 2025: Работа со стилями #4
Toni_Dev
Иконка календаря 18.01.2025
Иконка чата 0
Иконка глаза 78

Если вы когда-нибудь занимались веб-разработкой, то слово CSS для вас не ново. Стилизация — это то, что делает наши приложения красивыми, приятными и удобными. В React Native стилизация работает немного иначе, чем в вебе, но всё равно основы остаются схожими. Сегодня мы разберём, как работают стили в React Native, в чём их отличие от CSS и как использовать Flexbox для создания адаптивных интерфейсов.

А в конце — практическое задание: создадим адаптивный интерфейс с карточками, содержащими изображения и текст. Поехали!

Стилизация в React Native

Разница между CSS и стилями в React Native

React Native не использует CSS в привычном понимании. Вместо этого он предлагает объектно-ориентированный способ стилизации через StyleSheet. Это набор JavaScript-объектов, которые определяют внешний вид компонентов. Вот ключевые отличия:

Камелкейс вместо дефисов

В React Native стили пишутся в camelCase. Например, вместо background-color мы пишем backgroundColor.

Нет единиц измерения

Все размеры (ширина, высота, отступы) указываются в числах. Это означает «пиксели», но они автоматически адаптируются к экрану устройства.

const styles = StyleSheet.create({
  box: {
    width: 100, // 100 пикселей
    height: 50, // 50 пикселей
  },
});

Отсутствие наследования

В отличие от CSS, где стили могут наследоваться, в React Native каждый компонент должен быть стилизован индивидуально. Например, текст внутри контейнера View не получит стили родителя, если их явно не указать.

Ограниченный набор свойств

React Native не поддерживает весь спектр CSS-свойств. Например, нет float или z-index (хотя есть альтернативы).

Создание стилей

Стили в React Native задаются через объект StyleSheet. Это позволяет писать стили организованно и переиспользовать их в проекте.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

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

<View style={styles.container}>
  <Text style={styles.text}>Привет, React Native!</Text>
</View>

Flexbox в React Native

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

Основы Flexbox

Flex-контейнер (flex)

Задаёт, сколько места занимает элемент относительно других. Например, если один элемент имеет flex: 2, а другой — flex: 1, то первый займёт в два раза больше пространства.

Оси координат

Flexbox работает с двумя осями:

  • Главная ось (main axis) — по умолчанию это горизонталь (веб-разработчики привыкли к вертикальной оси).
  • Перекрёстная ось (cross axis) — перпендикулярна главной оси.

Ось можно изменить с помощью свойства flexDirection.

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

  • flexDirection — Указывает направление расположения элементов: row (по строке) или column (по столбцу, по умолчанию).
  • justifyContent — Выравнивание элементов по главной оси: flex-start, center, space-between, space-around, space-evenly.
  • alignItems — Выравнивание элементов по перекрёстной оси: flex-start, center, flex-end, stretch.

Пример работы с Flexbox

<View style={styles.container}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box3} />
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Практика: Адаптивный интерфейс с карточками

Создадим интерфейс с карточками, каждая из которых содержит изображение и текст. Карточки будут располагаться в две колонки на больших экранах и в одну колонку на маленьких.

Код

import React from 'react'; 
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';

// Данные для отображения карточек
const data = [ 
  { id: '1', title: 'Карточка 1', image: 'https://via.placeholder.com/150' }, 
  { id: '2', title: 'Карточка 2', image: 'https://via.placeholder.com/150' }, 
  { id: '3', title: 'Карточка 3', image: 'https://via.placeholder.com/150' }, 
  { id: '4', title: 'Карточка 4', image: 'https://via.placeholder.com/150' }, 
];

// Компонент карточки
const Card = ({ title, image }) => ( 
  <View style={styles.card}> 
    <Image source={{ uri: image }} style={styles.image} /> 
    <Text style={styles.title}>{title}</Text> 
  </View> 
);

// Основной компонент приложения
const App = () => { 
  return ( 
    <View style={styles.container}> 
      {data.map((item) => ( 
        <Card key={item.id} title={item.title} image={item.image} /> // Отображаем каждую карточку
      ))} 
    </View> 
  ); 
};

// Получаем ширину экрана для адаптации интерфейса
const windowWidth = Dimensions.get('window').width; 

// Стили для компонентов
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    flexDirection: 'row', // Горизонтальное расположение элементов
    flexWrap: 'wrap', // Перенос элементов на следующую строку
    justifyContent: 'space-around', 
    padding: 10, 
    backgroundColor: '#f5f5f5', 
  }, 
  card: { 
    width: windowWidth > 400 ? '45%' : '100%', // Адаптивная ширина
    marginBottom: 20, 
    backgroundColor: '#fff', 
    borderRadius: 10, 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2 }, 
    shadowOpacity: 0.1, 
    shadowRadius: 4, 
    elevation: 3, // Для Android
    padding: 10, 
  }, 
  image: { 
    width: '100%', 
    height: 150, 
    borderRadius: 10, 
    marginBottom: 10, 
  }, 
  title: { 
    fontSize: 16, 
    fontWeight: 'bold', 
    textAlign: 'center', 
  }, 
});

export default App;

Разберём, что мы сделали

Адаптивная ширина карточек

Мы используем Dimensions для определения ширины экрана и динамически задаём ширину карточек: в две колонки для больших экранов и в одну колонку для маленьких.

flexWrap: ‘wrap’

Позволяет компонентам переноситься на следующую строку, если они не помещаются.

Тени и закругления:

Мы добавили тень (shadowColor, shadowOffset, elevation) и закругления (borderRadius) для улучшения внешнего вида.

Изображения:

Картинки занимают всю ширину карточки, а borderRadius добавляет плавность.

 

Комментарии

0

Без регистрации и смс