Een simpele Nieuwsapp

INFO

Lesinhoud

In deze les bouwen we een eerste applicatie. We zullen nieuwsberichten ophalen van een API en deze tonen in de applicatie. De applicatie heeft een custom header en footer, maakt gebruik van routing, heeft een Over Ons en een Quote pagina.

Inhoud

• Opzetten van het project
  • Structuur van het project
• Routing en componenten
  • Inleiding
  • Het Home Component
  • Dependencies installeren
  • Het App.js component

Opzetten van het project

Wanneer je een project opzet met Expo krijg je out of the box een ganse boilerplate en voorbeeldtemplates om mee te starten. Dit is handig als je al een aantal applicaties hebt gebouwd.

Wij gaan starten met een leeg project om van daaruit de ganse applicatie op te bouwen. Dit kan je doen aan de hand van het volgende commando.

npx create-expo-app@latest newsapp --template blank

Met de template optie kan je dus aangeven hoe de structuur van je project er moet uitzien. Met de optie blank geven we aan dat er geen extra basisconfiguratie nodig is.

Structuur van het project

Wanneer je de structuur van het project bekijkt gaan er een aantal bestanden en mappen een belletje doen rinkelen. Nieuw zijn echter de volgende bestanden:

• index.js: Dit is het startpunt van je React Native applicatie. Het registreert de hoofdcomponent van je app bij de AppRegistry, wat ervoor zorgt dat je app wordt gerenderd. Hier wordt meestal het App component geïmporteerd en geregistreerd.

• app.json: Dit bestand bevat configuratie-instellingen voor je Expo project. Hierin kun je metadata zoals de naam van je app, het icoon, de startpagina en andere instellingen definiëren. Expo gebruikt deze informatie om je app correct op te bouwen en te presenteren.

• App.js: Dit is de hoofdcomponent van je React Native applicatie. Hierin definieer je de UI en de logica van je app. Dit bestand bevat meestal de basisstructuur van je app en kan andere componenten importeren en gebruiken.

Routing en componenten

Inleiding

Terwijl we onze app bouwen, gaan we verschillende componenten toevoegen om data aan onze gebruikers weer te geven. Hiervoor hebben we een manier nodig om tussen deze componenten te navigeren. Daarom gaan we eerst routing instellen. Met routing kunnen we statische routes instellen naar het gewenste component. In React Native zijn er verschillende opties, maar voor deze app gebruiken we React Navigation.

Het Home Component

Take The Wheel

Implementeer nu het onderstaande in het nieuw aangemaakte project.

Het eerste wat we moeten doen is een home component toevoegen. Maak in de projectmap een nieuwe map app aan en maak in deze map een bestand met de naam Home.tsx aan.

Libraries importeren

Importeer de volgende libraries in het Home component:

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

Het export statement

Componenten in React Native zijn eenvoudigweg functies en worden op de volgende manier gedefinieerd:

export default function Home() {
    return (
        
    );
}

Binnen de return gaan we de template definiëren.

• Maak een View component aan.
• Maak binnen het View component een Text component aan en zet hierin een welkomsttekst.

Stijlen definiëren

• Maak onder de functie een nieuwe constante styles aan. We gebruiken StyleSheet om nieuwe stijlen te kunnen toevoegen. Bekijk de documentatie en maak een nieuwe container selector aan binnen het StyleSheet en geef hieraan de volgende stijleigenschappen:
  • flex: 1
  • backgroundColor: '#FFF'
  • alignItems: 'center'
  • justifyContent: 'center'
• Voeg deze container nu toe aan het View component.

Uitgewerkte Code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function HomePage() {
    return (
        <View style={styles.container}>
            <Text>Welkom op de eerste React Native App</Text>
        </View>    
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        padding: 20
    },
})

Dependencies installeren

Installeer de volgende dependencies (met npm install) en interpreteer het doel van deze dependencies:

• @react-navigation/native: Dit is de core library voor React Navigation, die een manier biedt om tussen verschillende schermen in een React Native-app te navigeren. Het bevat essentiële hulpprogramma's en componenten voor navigatie.
• @react-navigation/stack: Deze library biedt een stack navigator voor React Navigation. Hiermee kun je tussen schermen in een stapel navigeren, waarbij elk nieuw scherm bovenop het vorige wordt geplaatst, vergelijkbaar met een stapel kaarten.
• react-native-reanimated: Deze library biedt een krachtigere en flexibelere manier om animaties in React Native te maken. Het biedt een abstractielaag voor de Animated API, waardoor soepelere en complexere animaties mogelijk zijn, vooral nuttig voor gebaren-gebaseerde interacties.
• react-native-gesture-handler: Deze library biedt native-gestuurde gebarenbeheer-API's voor React Native. Hiermee kun je gebaren zoals swipes, tikken en knijpen efficiënter afhandelen door de gebarenafhandeling naar de native laag te verplaatsen.
• react-native-screens: Deze library stelt native navigatiecontainercomponenten bloot aan React Native. Het verbetert de prestaties van navigatie door native weergaven te gebruiken voor schermweergave, wat vooral nuttig is in combinatie met React Navigation.
• react-native-safe-area-context: Deze library biedt een flexibele manier om veilige gebiedsinvoegingen in React Native af te handelen. Het helpt je om je inhoud op de juiste manier te positioneren rond inkepingen, statusbalken en andere apparaat-specifieke interface-elementen.
• @react-native-community/masked-view: Hiermee kun je weergaven maken die hun children maskeren, wat nuttig kan zijn voor het creëren van effecten zoals image of text masks.

Het App.js component

Take The Wheel

Implementeer nu het onderstaande in het nieuw aangemaakte project.

• Importeer de volgende libraries in het App component:

  • 'react-native-gesture-handler'
  • React vanuit 'react'
  • NavigationContainer vanuit '@react-navigation/native'
  • createStackNavigator vanuit '@react-navigation/stack'

• Importeer ook het eerder aangemaakt Home component

• Maak een constante Stack aan en initialiseer deze variabele met de createStackNavigator methode. Deze gaan we gebruiken om onze routes te definiëren.

• Verwijder alles uit het return statement.

  • Voeg hier dan vervolgens een NavigationContainer component toe.
  • Voeg binnen de NavigationContainer een Stack.Navigator toe. Je gebruikt hier de Stack constante die je eerder hebt aangemaakt. In dit component definiëer je de routes. Geef dit component de eigenschap initialRouteName met de waarde "General News". Dit specificeert welke route moet worden weergegeven wanneer de app start.
  • Voeg in het Stack.Navigator component het Stack.Screen component toe, dat een route in de app voorstelt. Geef hieraan volgende eigenschappen:
    • name met als waarde "General News" dat de naam van de route voorstelt en wordt weergegeven in de header als je de standaardconfiguratie behoudt.
    • component met als waarde het Home component.

Uitgewerkte Code

import 'react-native-gesture-handler';
import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomePage from './app/Home';

const Stack = createStackNavigator();

export default function App() {

  return (
          <NavigationContainer>
            <Stack.Navigator
                    initialRouteName="General News"
            >
              <Stack.Screen
                      name="General News"
                      component={HomePage}
              />
            </Stack.Navigator>
          </NavigationContainer>
  );
}

Start tenslotte de app op en bekijk het resultaat.