Begrip: Styling in React Native

Om de opmaak van een React Native applicatie te implementeren wordt iets gebruikt dat op CSS lijkt, maar niet helemaal overeen komt. Er zijn enkele belangrijke verschillen tussen CSS en React Native styling.

• Id's, klassen en andere CSS-selectors kunnen niet gebruikt worden
• Lay-out gebeurt uitsluitend met flexbox. Er zijn wel enkele verschillen met CSS-flexbox.
  • flexDirection heeft column als default
  • alignContent heeft flex-start als default
  • flexShrink heeft 0 als default
  • flex kan slechts een waarde krijgen, een getal.
• Er zijn twee mogelijke eenheden rem, em, px, ... worden niet gebruikt.
  • Als de hoogte en/of breedte zonder eenheid (en als integer) genoteerd wordt, verwijst dit naar density-independent pixels.
  • Als de hoogte en/of breedte als '$x$%' genoteerd wordt, verwijst dit naar procentuele afmetingen.
• Een View component moet een vaste hoogte of breedte hebben of moet de regel flex: $x$ krijgen waarbij $x$ een integer groter dan of gelijk aan $1$ is. Als dit niet het geval is, zijn de kinderen niet zichtbaar.
• Er is GEEN overerving van View naar Tekst, dit betekent dat dingen als tekst kleur voor elke Text component individueel aangepast moet worden. Behalve als de Text component in een andere Text component genest is.

Opmaak wordt gedefinieerd via de StyleSheet namespace en wordt volledig in JavaScript genoteerd.

import {View, Text, StyleSheet} from 'react-native'
import {FunctionComponent} from 'react'
import {StatusBar} from 'expo-status-bar'

const Foo: FunctionComponent = () => {
    return (
        <View style={styles.container}>
            <Text style={[styles.textStyle, styles.strikeThrough]}>
                Je kan één of meer stijlen toekennen aan een component.
                De laatste stijl heeft voorrang. 
                De kleur van deze tekst is dus rood.
            </Text>
            <StatusBar style="auto" />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#282c34',
        alignItems: 'center',
        justifyContent: 'center',
    },
    textStyle: {
        color: '#fff',
        fontSize: 18,
    },
    strikeThrough: {
        color: 'red',
        textDecorationLine: 'line-through',
    },
})