Работа с StyleSheet — стилизация компонентов и использование Flexbox

Основы стилизации в React Native

React Native предлагает мощный инструмент для стилизации компонентов — StyleSheet. Он похож на CSS (по крайней мере, по духу), но с рядом ключевых отличий. Давайте начнём с создания простейшего стиля для нашего приложения.

Что такое StyleSheet?

В React Native стили описываются с помощью объекта StyleSheet, который предоставляет метод create. Через него мы определяем набор стилей, которые затем применяем к компонентам.

Пример создания стиля:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Привет, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // Элемент занимает всё доступное пространство
    justifyContent: 'center', // Центрируем содержимое по вертикали
    alignItems: 'center', // Центрируем содержимое по горизонтали
    backgroundColor: '#f5f5f5', // Цвет фона (как в CSS)
  },
  text: {
    fontSize: 20, // Размер шрифта
    color: '#333', // Цвет текста
    fontWeight: 'bold', // Жирный шрифт
  },
});

export default App;

Результат:

• Окно имеет сероватый фон.
• Текст располагается по центру, выглядит большим и жирным.

Отличия от CSS

Если вы знаете CSS, то StyleSheet покажется знакомым, но:

• В React Native используются CamelCase вместо CSS-синтаксиса. Например, background-color становится backgroundColor.
• Нет каскадирования: стили применяются только к тому компоненту, к которому они привязаны.
• Используются свои единицы измерения: размеры задаются в условных единицах экрана, а проценты работают как и в CSS.
• Поддерживаются только свойства, релевантные для мобильных приложений.

Интересный факт

React Native не использует HTML и CSS, но он рендерит родные UI-компоненты через JavaScript. Так что под капотом ваш StyleSheet превращается в аналогичный код для iOS и Android.

Flexbox: ваш лучший друг для адаптивных интерфейсов

React Native использует Flexbox для компоновки элементов. Это значит, что всё позиционирование и выравнивание компонентов основывается на мощной концепции гибкой сетки.

Основы Flexbox

Flexbox позволяет равномерно распределять элементы в контейнере и управлять их размерами. Вот основные свойства, которые вы будете использовать:

• flexDirection: направление компоновки row или column.
• justifyContent: выравнивание элементов по главной оси.
• alignItems: выравнивание по поперечной оси.
• flex: способность элемента «тянуться» или уменьшаться в размере.

Пример использования Flexbox

Создадим три блока, расположенные горизонтально, с равномерным распределением пространства между ними:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}><Text>Блок 1</Text></View>
      <View style={styles.box2}><Text>Блок 2</Text></View>
      <View style={styles.box3}><Text>Блок 3</Text></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Располагаем элементы горизонтально
    justifyContent: 'space-between', // Расстояние между элементами
    alignItems: 'center', // Центровка по вертикали
    backgroundColor: '#f5f5f5',
  },
  box1: {
    flex: 1,
    height: 50,
    backgroundColor: '#ff9999', // Красный
    justifyContent: 'center',
    alignItems: 'center',
  },
  box2: {
    flex: 1,
    height: 50,
    backgroundColor: '#99ff99', // Зелёный
    justifyContent: 'center',
    alignItems: 'center',
  },
  box3: {
    flex: 1,
    height: 50,
    backgroundColor: '#9999ff', // Синий
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Этот код создаст три равные по ширине блока, которые займут всю доступную ширину.

Как работает Flexbox в React Native

1. Главная ось (Main Axis): задаётся через flexDirection. Она определяет, будут ли элементы располагаться горизонтально row или вертикально column.
2. Выравнивание по главной оси: управляется justifyContent. Например:
   • flex-start: элементы группируются в начале.
   • center: элементы центрируются.
   • space-between: равномерное распределение между элементами.
   • space-around: равномерное распределение с отступами.
3. Поперечная ось (Cross Axis): задаётся через свойство alignItems.
4. Гибкость компонентов: свойство flex позволяет компонентам адаптироваться. Значение 1 даёт равное распределение.

Создание адаптивного интерфейса

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

Пример адаптивного интерфейса

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

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}><Text>Блок 1</Text></View>
      <View style={styles.box2}><Text>Блок 2</Text></View>
      <View style={styles.box3}><Text>Блок 3</Text></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Располагаем элементы горизонтально
    justifyContent: 'space-between', // Расстояние между элементами
    alignItems: 'center', // Центровка по вертикали
    backgroundColor: '#f5f5f5',
  },
  box1: {
    flex: 1,
    height: 50,
    backgroundColor: '#ff9999', // Красный
    justifyContent: 'center',
    alignItems: 'center',
  },
  box2: {
    flex: 1,
    height: 50,
    backgroundColor: '#99ff99', // Зелёный
    justifyContent: 'center',
    alignItems: 'center',
  },
  box3: {
    flex: 1,
    height: 50,
    backgroundColor: '#9999ff', // Синий
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

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

Особенности и типичные ошибки

1. Почему стилификация не работает?

Если ваши стили не применяются, проверьте:

1. Правильно ли вы указали объект стилей в компоненте?
2. В названии стилей используется CamelCase? (например, backgroundColor, а не background-color).

2. Ошибка с размерами

React Native не поддерживает абсолютные единицы измерения, такие как px. Используйте flex или проценты 100%.

3. Переполнение

Если содержимое вашего компонента слишком большое, используйте scrollView или настройте overflow.

2

Задача

Модуль 3: React, 21 уровень, 6 лекция

Недоступна

Создание простых стилей с использованием StyleSheet

Создание простых стилей с использованием StyleSheet

Открыть