Opdracht NewsDetail

Ondertussen heb je al een aantal pagina's aangemaakt in de applicatie. Op de homepagina wordt al een overzicht getoond van de verschillende items. Wanneer je klikt op een item, kom je op een detailpagina uit. Die detailpagina ziet er bijvoorbeeld als volgt uit:

Maak deze pagina nu na. Hieraan zijn de volgende vereisten verbonden:

1. Bestand maken

Maak een nieuw bestand in de map app met de naam NewsDetail.tsx in je projectmap.

2. Libraries importeren

Je hebt de volgende libraries nodig:

• React,
• useEffect,
• useState,
• StyleSheet,
• Text,
• View,
• Pressable,
• ActivityIndicator,
• Image
• ScrollView

3. Component instellen

Maak een functioneel component met de naam NewsDetail en neem de route en de navigatie props op als argument.

• Initialiseer de nodige state variabelen om de laadstatus en de gegevens die worden opgehaald van de API te beheren.
• Haal de url die je hebt meegegeven bij de klik in het vorige scherm op uit de parameters van de route;
• Haal met de unieke url, de juist post op uit de gegevens die je terugkrijgt van de API.

4. Gegevens ophalen

Gebruik de useEffect hook om gegevens op te halen van het API endpoint. Verwerk de opgehaalde gegevens en werk de state variabelen bij.

5. UI-componenten

Gebruik de juiste componenten om het voorbeeld uit het screenshot na te maken. De CSS krijg je cadeau:

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#FFF',
        alignItems: 'center'
    },
    button: {
        padding: 20,
        alignItems: 'flex-start',
        justifyContent: 'center'
    },
    buttonText: {
        fontFamily: 'Poppins',
        fontWeight: 'bold'
    },
    storyImage: {
        height: 300,
        width: '100%'
    },
    title: {
        padding: 20,
        fontFamily: 'Poppins',
        fontWeight: 'bold',
        fontSize: 20
    },
    blurb: {
        fontFamily: 'Poppins',
        fontStyle: 'italic',
        fontSize: 14,
        padding: 20
    },
    content: {
        flex: 1,
        fontFamily: 'Poppins',
        fontSize: 16,
        paddingTop: 30,
        paddingBottom: 100,
        paddingLeft: 20,
        paddingRight: 20
    }
})

6. Navigatie instellen

Importeer in je App.js bestand het NewsDetail component. Voeg de NewsDetail route toe aan je stack navigator en stel de juiste opties in voor de header.