React Native Styling: Stylede komponenter, Flexbox-layout og mere

React Native giver en API til oprettelse af typografiark og styling af dine komponenter: 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' } });

Mens almindelige CSS-stilark ikke er gyldige, svarer React Natives supersæt af CSS meget til traditionel CSS.

Mange CSS egenskaber (f.eks color, height, top, right, bottom, left) er de samme i StyleSheet. Eventuelle CSS-egenskaber, der har bindestreger (f.eks font-size. background-color), Skal ændres til camelCase (f.eks fontSize. backgroundColor).

Ikke alle CSS-egenskaber findes i StyleSheet. Da der ikke er noget ægte koncept om at svæve på mobile enheder, findes CSS-svæveegenskaber ikke i React Native. I stedet leverer React Native berørbare komponenter, der reagerer på berøringshændelser.

Styles arves heller ikke, da de er i traditionel CSS. I de fleste tilfælde skal du erklære stilen for hver komponent.

Flexbox-layout

React Native bruger en implementering af flexbox svarende til webstandarden. Som standard indstilles emner i visningen til display: flex.

Hvis du ikke vil bruge flexbox, kan du også arrangere React Native-komponenter via relativeeller absolutepositionering.

Flexbox i React Native er som standard i flexDirection: columnstedet for flex-direction: row(webstandard). Den columnværdi viser fleksible elementer lodret, der optager mobilenheder i stående retning.

For at lære mere om flexbox, besøg denne detaljerede guide til CSS-tricks og en gamified læringsmetode med Flexbox Froggy.

Stylede komponenter

At medtage mange stilarter i en fil med en komponent er ikke altid let at vedligeholde. Stylede komponenter kan løse dette problem.

For eksempel kan en knapkomponent bruges flere steder på tværs af en applikation. Kopiering og indsættelse af stilobjektet med hver Button-forekomst ville være ineffektivt. Opret i stedet en genanvendelig, stylet knapkomponent:

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

Den stilede Button-komponent kan let importeres og bruges på tværs af applikationen uden gentagne gange at erklære stilobjektet:

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

Biblioteker til styling

Der er et par populære biblioteker til styling af React Native. Nogle af dem indeholder funktioner, der ligner Bootstrap, inklusive standardformularer, knapformater og indstillinger for sidelayout.

Et af de mest populære biblioteker er stylede komponenter. Der er mange andre, du kan finde på npm og GitHub for at prøve selv.