React Native Styling: Stílusú alkatrészek, Flexbox elrendezések és egyebek

A React Native API-t biztosít a stíluslapok létrehozásához és az összetevők stílusának megtervezéséhez: 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' } });

Míg a szokásos CSS-stíluslapok érvénytelenek, a React Native CSS-szettje nagyon hasonlít a hagyományos CSS-re.

Sok CSS tulajdonságok (pl color, height, top, right, bottom, left) ugyanaz a StyleSheet. Bármilyen CSS tulajdonságokat, amelyek kötőjelet (pl font-size, background-color) kell változtatni teveEsetnek (pl fontSize, backgroundColor).

Nem minden CSS-tulajdonság létezik a StyleSheet-ben. Mivel a mobileszközökön való lebegésnek nincs igazi fogalma, a CSS lebegési tulajdonságai nem léteznek a React Native alkalmazásban. Ehelyett a React Native érinthető összetevőket kínál, amelyek reagálnak az érintéses eseményekre.

A stílusok szintén nem öröklődnek, mint a hagyományos CSS-ben. A legtöbb esetben deklarálnia kell az egyes komponensek stílusát.

Flexbox elrendezések

A React Native a web szabványhoz hasonló flexbox megvalósítást használ. Elemeiről alapértelmezés szerint a nézet lesz állítva display: flex.

Ha nem szeretné használni a flexboxot, akkor a React Native komponenseket is elhelyezheti relativevagy absolutepozicionálhatja.

A React Native Flexbox alapértelmezése flexDirection: columna flex-direction: row(web szabvány) helyett . Az columnérték függőlegesen jeleníti meg a rugalmas elemeket, amely a mobil eszközöket álló helyzetben helyezi el.

Ha többet szeretne megtudni a flexboxról, keresse fel ezt a részletes útmutatót a CSS-trükkökről és a Flexbox Froggy játékosított tanulási megközelítéséről.

Stílusú alkatrészek

Sok stílus beillesztése egy összetevővel rendelkező fájlba nem mindig könnyű fenntartani. A stílusos alkatrészek megoldhatják ezt a problémát.

Például egy gomb komponenst több helyen is lehet használni egy alkalmazásban. A stílusobjektum másolása és beillesztése az egyes Button-példányokkal nem hatékony. Ehelyett hozzon létre újrafelhasználható, stílusú Gomb komponenst:

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

A stílusgomb komponens egyszerűen importálható és felhasználható az alkalmazásban anélkül, hogy ismételten deklarálná a stílusobjektumot:

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

Könyvtárak stílushoz

Van néhány népszerű könyvtár a React Native stílusának megtervezéséhez. Néhány közülük a Bootstrap-hoz hasonló funkciókat kínál, beleértve az alapértelmezett űrlapokat, a gombstílusokat és az oldalelrendezési beállításokat.

Az egyik legnépszerűbb könyvtár a stílus-komponensek. Sok más megtalálható az npm-en és a GitHubon, hogy kipróbálhassa magát.