Afronden van de Homepage

Nu we het framework van onze applicatie hebben opgezet, gaan we de startpagina afwerken. We zouden nog veel tijd kunnen besteden aan het configureren van de applicatie, maar uiteindelijk gaan gebruikers applicaties gebruiken voor de content. De eenvoudigste manier om de applicatie te voorzien van data is via een externe bron. Onze applicatie zal uiteindelijk een API hebben om specifiek nieuws aan te leveren. Om geen tijd te verliezen aan het opzetten van een API, gaan we newsapi.org gebruiken om ons nieuws aan te leveren. Dit is een gratis service die je kan gebruiken. Er zijn een aantal limieten, maar voor onze doeleinden gaat dit geen probleem geven.

Inhoud

• Account aanmaken bij newsapi.org
• Home.tsx configureren
  • useState
• Componenten importeren
• State variabelen instellen
• useEffect Hook toevoegen
• Component voor een item toevoegen
• Weergave van de Homepage
• Stijlen toevoegen

Account aanmaken bij newsapi.org

Ga naar newsapi.org en maak een account aan. Je zal uiteindelijk een API-key krijgen. Zorg ervoor dat je deze opslaat omdat we die later nog gaan gebruiken.

Home.tsx configureren

Ga naar het bestand Home.tsx in jouw project. Importeer de volgende libraries in het component:

• useEffect en useState Hooks van react

useState

useState is een functie die je aanroept om een state variabele te maken. Deze variabele kan worden gebruikt om gegevens op te slaan die veranderen tijdens de levensduur van een component, zoals de invoer van een gebruiker of de status van een knop (aan/uit).

Voorbeeld

Eerst initialiseren we de state:

const [count, setCount] = useState(0);

Waarbij:

• count de huidige waarde van de state is.
• setCount een functie is die je gebruikt om de waarde van count te veranderen.
• 0 de initiële waarde van count is.

Gebruik van de state in een component:

return (
  <View>
    <Text>{count}</Text>
    <Button onPress={() => setCount(count + 1)} title="Verhoog" />
  </View>
);

In dit voorbeeld:

• wordt count weergegeven in een Text component.
• Wanneer de knop wordt ingedrukt, wordt setCount aangeroepen om count te verhogen met 1.

Componenten importeren

Importeer de volgende libraries in het component:

• ActivityIndicator, FlatList, Image, en Pressable componenten.
• Voeg de navigation prop toe als argument aan het Homepage component.

State variabelen instellen

Voeg een constante toe voor de dataLoading state.

• dataLoading is de state variabele, terwijl finishLoading de functie is om de state te wijzigen. Initialiseer deze state met de boolean true.

Voeg een constante toe voor de newsData state.

• setData is de functie om de state te wijzigen. Initialiseer deze state met een lege array.

useEffect Hook toevoegen

• Voeg de useEffect Hook toe om posts van de nieuws-API op te halen.
• Gebruik in de callbackfunctie de fetch methode om data op te halen van het endpoint 'https://newsapi.org/v2/everything?q=tech&apiKey=JOUW_API_KEY. Gebruik je eigen API-key aan het einde van het request.
• Verwerk de data met de JSON methode en sla deze op in de newsData state variabele.
• Voeg de catch methode toe om eventuele fouten af te handelen.
• Zet tenslotte de finishLoading state variable op false

Component voor een item toevoegen

Maak een constante storyItem aan. Deze constante gaan we gebruiken om voor elk item een component in de lijst weer te geven. Gebruik het Pressable component om elk item klikbaar te maken. Gebruik de navigate methode om naar het (nog aan te maken) NewsDetail component te gaan en de URL van het verhaal door te geven. Zorg ervoor dat je binnen het Pressable component een View aanmaakt waarin je de volgende gegevens kan weergeven:

• de titel van het item
• de afbeelding van het item
• de omschrijving van het item

Weergave van de Homepage

Gebruik binnen het View component, het FlatList component om de lijst van beschikbare verhalen weer te geven. Voeg aan het component de volgende attributen toe:

• keyExtractor om een unieke sleutel (bv de URL van een item) voor elk item in de lijst te genereren.

• data waaraan je newsData meegeeft.

• renderItem waaraan je de constante storyItem meegeeft

• Voeg tenslotte een conditie om het ActivityIndicator component weer te geven als dataLoading waar is. Je toont de lijst dus pas wanneer de data is binnengehaald.

Stijlen toevoegen

Voeg de volgende stijlen toe aan het bestaande stijlobject.

• thumbnail met de volgende eigenschappen:
  • height: 100,
  • width: '98%'
• Voeg deze selector nu toe aan de afbeelding van een item.
• listings met de volgende eigenschappen:
  • paddingTop: 15
  • paddingBottom: 25
  • borderBottomColor: '#000"
  • borderBottomWidth: 1
• Voeg deze selector nu toe aan het View component binnen het Pressable component.
• title met de volgende eigenschappen:
  • paddingBottom: 10,
  • fontFamily: 'Poppins',
  • fontWeight: 'bold'
• Voeg deze selector nu toe aan de titel van een item.
• blurb met de volgende eigenschappen:
  • fontFamily: 'Poppins',
  • fontStyle: 'italic'
• Voeg deze selector nu toe aan de omschrijving van een item.