React Native Styling: stilizirane komponente, Flexbox rasporedi i još mnogo toga

React Native pruža API za stvaranje tablica stilova i oblikovanje komponenata: 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' } });

Iako redovite CSS tablice stilova ne vrijede, superset CSS-a React Native vrlo je sličan tradicionalnom CSS-u.

Mnogi svojstva CSS (npr color, height, top, right, bottom, left) su isti u stilovima. Sva svojstva CSS-a koja imaju crtice (npr font-size. background-color) Moraju se promijeniti u camelCase (npr fontSize. backgroundColor).

Ne postoje sva CSS svojstva u StyleSheetu. Budući da ne postoji istinski koncept lebdenja na mobilnim uređajima, svojstva CSS lebdenja ne postoje u React Nativeu. Umjesto toga, React Native nudi dodirljive komponente koje reagiraju na dodirne događaje.

Stilovi se također ne nasljeđuju kao u tradicionalnom CSS-u. U većini slučajeva morate navesti stil svake komponente.

Izgledi Flexbox-a

React Native koristi implementaciju flexboxa sličnu web standardu. Prema zadanim postavkama stavke u prikazu bit će postavljene na display: flex.

Ako ne želite koristiti flexbox, također možete organizirati React Native komponente putem relativeili absolutepozicioniranja.

Zadane vrijednosti Flexboxa u React Native flexDirection: column, umjesto flex-direction: row(web standard). columnVrijednost prikazuje fleksibilne stavke okomito, koja broji mobilne uređaje u portretnoj orijentaciji.

Da biste saznali više o flexboxu, posjetite ovaj detaljni vodič o CSS-trikovima i gamificiranom pristupu učenju s Flexbox Froggy.

Stilizirane komponente

Uključivanje puno stilova u datoteku s komponentom nije uvijek lako održavati. Stilizirane komponente mogu riješiti ovaj problem.

Na primjer, komponenta gumba može se koristiti na više mjesta u aplikaciji. Kopiranje i lijepljenje stilskog objekta sa svakom instancom gumba bilo bi neučinkovito. Umjesto toga, izradite komponentu gumba za višekratnu uporabu:

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 } };

Stiliziranu komponentu gumba lako je uvesti i koristiti u aplikaciji bez opetovanog deklariranja stilskog objekta:

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  ); } }

Knjižnice za oblikovanje

Postoji nekoliko popularnih knjižnica za oblikovanje React Native. Neki od njih nude značajke slične Bootstrapu, uključujući zadane obrasce, stilove gumba i opcije izgleda stranice.

Jedna od najpopularnijih knjižnica su styled-components. Mnogo je drugih koje možete pronaći na npm-u i GitHub-u kako biste isprobali sami.