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) са едни и същи в стиловия лист. Всички 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

Стилни компоненти

Включването на много стилове във файл с компонент не винаги е лесно да се поддържа. Стилизираните компоненти могат да разрешат този проблем.

Например компонент Бутон може да се използва на няколко места в приложение. Копирането и поставянето на стиловия обект с всеки екземпляр на Button би било неефективно. Вместо това създайте компонент за бутон за многократна употреба:

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, за да опитате сами.