Web Expert 2

Appearance

De About pagina ​

Inhoud

ScrollView ​

In dit deel ga je een About pagina aanmaken. Het doel van deze pagina is niet zozeer de content van die op de pagina komt, maar wel het gebruik van het ScrollView component. Dit component gaat ervoor zorgen dat wanneer de content van de pagina te lang is voor het scherm, je de mogelijkheid krijgt om te scrollen binnen de pagina. Dit principe is niet hetzelfde als het FlatList component dat we eerder hebben gezien waarbij we dynamisch hetzelfde component onder elkaar weergaven waardoor scrollen ook mogelijk werd binnen de pagina.

Het About Component ​

Take The Wheel

Implementeer nu het onderstaande in de app.

Maak in de app map een nieuw bestand aan met de naam About.tsx.

Libraries importeren ​

Importeer de volgende libraries in het component:

  • React vanuit 'react'
  • StyleSheet, Text, View, Image en ScrollView vanuit 'react-native'

Variabelen ​

  • Download 3 willekeurige afbeeldingen, plaats deze in de assets map en importeer deze dan ook in het component.
  • Maak 2 constanten aan die elk dummy tekst bevatten. De tekst mag telkens meer dan 250 woorden bevatten.

Het component ​

Maak het About component aan en voorzie hierin de volgende structuur:

  • View component waaraan je de container klasse meegeeft voor de stijl
    • ScrollView component
      • Image component voor de eerste afbeelding, waaraan je de image klasse meegeeft voor de stijl
      • Text component dat dient als heading en dat je een willekeurige tekst mag geven, waaraan je de heading klasse meegeeft voor de stijl
      • Text component voor de eerste tekst constante, waaraan je de heading text meegeeft voor de stijl
      • Image component voor de tweede afbeelding, waaraan je de image klasse meegeeft voor de stijl
      • Text component dat dient als heading en dat je een willekeurige tekst mag geven, waaraan je de heading klasse meegeeft voor de stijl
      • Text component voor de tweede tekst constante, waaraan je de text klasse meegeeft voor de stijl
      • Image component voor de derde afbeelding, waaraan je de image klasse meegeeft voor de stijl
      • Text component dat dient als heading en dat je een willekeurige tekst mag geven, waaraan je de heading klasse meegeeft voor de stijl

De stijl ​

De CSS ziet er als volgt uit:

tsx
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    image: {
        width: '100%',
        height: 300
    },
    heading: {
        fontFamily: 'Poppins',
        fontWeight: 'bold',
        paddingTop: 5
    },
    text: {
        fontFamily: 'Poppins'
    }
})

Zorg er tenslotte voor dat je naar het About component kan navigeren via de tabnavigatie.