Стилізація компонентів

В React Native для стилізації компонентів використовується JavaScript. Усі основні компоненти підтримують prop style. Стилі пишуть у форматі ключ: значення. Якщо відповідник стилю в CSS складається із двох та більше слів, то використовують формат написання camelCase. Наприклад backgroundColor замість background-color. Числові значення передають без жодних одиниць вимірювання. Всі інші значення - це рядковий тип даних.

<Text
  style={{
    margin: 10,
    fontSize: 42,
    backgroundColor: "#F6F6F6",
    color: "red",
  }}
>
  Hello
</Text>

У React Native немає окремого формату даних для стилів (немає аналога CSS в web), немає медіазапитів та псевдоселекторів. Написання інлайн-стилів - це стандартний патерн стилізації компонентів.

У prop style можна передати масив обʼєктів стилів. Вони будуть зібрані і передані компоненту автоматично в одному збірному обʼєкті. Причому, якщо в наступному обʼєкті стилю буде дублюватися стиль, то він перебʼє стиль попереднього обʼєкта. Застосується останній варіант.

<Text
  style={[
    { color: "red", fontWeight: "bold", fontSize: 30 },
    { color: "blue", backgroundColor: "yellow" },
  ]}
>
  Hello
</Text>

В даному випадку результуючим стилем буде: { color: "blue", fontWeight: "bold", fontSize: 30, backgroundColor: "yellow" }

StyleSheet

Використовувати наведену вище стилізацію компонентів недоцільно через неможливість повторного використання стилів для однотипних компонентів. Для оптимізації стилізації в React Native існує спеціальний клас StyleSheet.

Щоб його застосувати, створюють змінну (зазвичай її називають styles) яка є результатом виклику функції StyleSheet.create(). У неї передають обʼєкт у вигляді {ключ: об’єкт стилів}.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.textBase}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textBase: { color: "blue", fontWeight: "bold", fontSize: 30 },
  textUpdated: { color: "blue", backgroundColor: "yellow" },
});

Тут так само можна комбінувати стилі компонента, як було раніше зазначено:

<Text style={[styles.textBase, styles.textUpdated]}>Hello</Text>

StyleSheet не є обов’язковим паттерном. Для стилізації компонентів можна використовувати і просто об’єкти зі стилями. Але перевага використання StyleSheet в тому, що редактор коду буде підказувати назви стилів і їх можливі значення.

Стилізацію компонентів проекту можна організувати по аналогії підключення таблиці стилів CSS в HTML. Стилі всього застосунку винести в окремий файл styles.js, підключати його і використовувати в будь-якому компоненті застосунку.

App.js

import { Text, View } from "react-native";

import { styles } from "./styles";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.textBase, styles.textUpdated]}>Hello</Text>
    </View>
  );
}

styles.js

import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textBase: { color: "blue", fontWeight: "bold", fontSize: 30 },
  textUpdated: { color: "blue", backgroundColor: "yellow" },
});

Можна також створювати файл таблиці стилів персональний для кожного компоненту окремо. Утім це радше заплутає. Адже стиль компонентів повторюється і нема потреби ускладнювати структуру проекту.

Деякі опції стилізації виконуються завдяки props компонентів. Докладніше опис по пропсам компонентів можна дізнатися в офіційній документації.

Єдиного стандарту оформлення стилізації скрінів і компонентів немає. Можна прописувати StyleSheet внизу файлу, можна виносити в окремий файл styles і інпортувати.

Для себе знайшов поки що найкращий варіант: створити пару файлів Screen.js та stylesScreen.js і помістити їх для кожного скріна чи компонента в папку за назвою скріна чи компонента Screen.

Переваги такого підходу від інших: стилі лежать в окремому файлі (відділення логіки і стилізації), але якщо всі стилі проекту виносити в окремий файл, то цей файл стає дуже довгим.

Тому це щось схоже за аналогією з css-модулями чи стилізованими компонентами в React.

Посилання на офіційну документацію:

PreviousФундаментальні концепції React в React Native NextСтилізація залежно від платформи

Last updated 1 year ago

import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( <View style={styles.container}> <Text style={styles.textBase}>Hello</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, textBase: { color: "blue", fontWeight: "bold", fontSize: 30 }, textUpdated: { color: "blue", backgroundColor: "yellow" }, });

import { Text, View } from "react-native"; import { styles } from "./styles"; export default function App() { return ( <View style={styles.container}> <Text style={[styles.textBase, styles.textUpdated]}>Hello</Text> </View> ); }

import { StyleSheet } from "react-native"; export const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, textBase: { color: "blue", fontWeight: "bold", fontSize: 30 }, textUpdated: { color: "blue", backgroundColor: "yellow" }, });