React Native Styling: стилізовані компоненти, макети Flexbox та багато іншого

React Native надає API для створення таблиць стилів та стилізації компонентів: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

Хоча звичайні таблиці стилів CSS недійсні, набір CSS React Native дуже схожий на традиційний CSS.

Багато властивості CSS (наприклад color, height, top, right, bottom, left) однакові в StyleSheet. Будь-які властивості CSS, які мають дефіси (наприклад font-size, background-color), слід змінити на camelCase (наприклад fontSize, backgroundColor).

Не всі властивості CSS існують у StyleSheet. Оскільки не існує справжньої концепції наведення на мобільних пристроях, властивості наведення CSS у React Native не існують. Натомість React Native забезпечує дотичні компоненти, які реагують на дотикові події.

Стилі також не успадковуються, як у традиційному CSS. У більшості випадків потрібно оголосити стиль кожного компонента.

Макети Flexbox

React Native використовує реалізацію flexbox, подібну до веб-стандарту. За замовчуванням для елементів у поданні буде встановлено значення display: flex.

Якщо ви не хочете використовувати flexbox, ви також можете розташувати компоненти React Native за допомогою relativeабо absoluteпозиціонування.

За замовчуванням Flexbox у React Native flexDirection: columnзамість flex-direction: row(веб-стандарт). columnЗначення відображає гнучкі елементи вертикально, який вміщує мобільні пристрої в портретній орієнтації.

Щоб дізнатись більше про flexbox, відвідайте цей детальний посібник з CSS-хитрощів та ігровий підхід до навчання з Flexbox Froggy.

Стильовані компоненти

Включення великої кількості стилів у файл із компонентом не завжди легко підтримувати. Стилізовані компоненти можуть вирішити цю проблему.

Наприклад, компонент кнопки може використовуватися в кількох місцях у програмі. Копіювання та вставка об’єкта стилю з кожним екземпляром кнопки було б неефективним. Натомість створіть багаторазовий стильовий компонент кнопки:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

Стильований компонент Button можна легко імпортувати та використовувати в додатку без неодноразового оголошення об’єкта стилю:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

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

Є кілька популярних бібліотек для стилізації React Native. Деякі з них надають функції, подібні до Bootstrap, включаючи форми за замовчуванням, стилі кнопок та параметри макета сторінки.

Однією з найпопулярніших бібліотек є styled-components. Є багато інших, які ви можете знайти на npm та GitHub, щоб спробувати самі.