Wat is React Native?

React Native is een framework waarmee je mobiele apps kunt bouwen met JavaScript en React. Met Expo kun je eenvoudig een React Native app ontwikkelen en testen zonder gedoe met native code.

Belangrijk verschil met HTML/React:

In React Native gebruik je GEEN HTML tags zoals <div>, <p>, <h1>, <section>, etc.

In plaats daarvan gebruik je React Native componenten:

  • <div> wordt <View>
  • <p>, <h1>, <span> worden allemaal <Text>
  • <img> wordt <Image>
  • <button> wordt <Button> of <Pressable>

Handige tip: Gebruik de shortcut rnfs om sneller de startcode op te zetten!

View Component

Een View is vergelijkbaar met een div in HTML. Het is een container voor andere componenten.

Voorbeeld

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

export default function App() {
  return (
    <View>
      <Text>Hallo wereld!</Text>
    </View>
  );
}

Wat gebeurt er?

  • View is een container component
  • Vergelijkbaar met een div in HTML
  • Kan andere componenten bevatten

Text Component

Met Text geef je tekst weer op het scherm.

Voorbeeld

<Text style={{ fontSize: 20, color: 'blue' }}>
  Dit is een tekst
</Text>

Belangrijke regels:

  • Alle tekst MOET in een <Text> component
  • Je kunt inline styles gebruiken
  • Ondersteunt fontSize, color, fontWeight, etc.

Button vs Pressable

Een Button is een standaard knop, maar Pressable geeft meer controle over het uiterlijk en gedrag.

Belangrijk: Je kunt een Button niet stylen, maar Pressable wel!

Button Voorbeeld

import { Button } from 'react-native';

<Button 
  title="Klik mij" 
  onPress={() => alert('Geklikt!')} 
/>

Pressable Voorbeeld

import { Pressable, Text } from 'react-native';

<Pressable onPress={() => alert('Geklikt!')}>
  <Text style={{ 
    padding: 10, 
    backgroundColor: 'lightblue' 
  }}>
    Druk hier
  </Text>
</Pressable>

Wanneer welke gebruiken?

  • Button: Voor simpele knoppen zonder styling
  • Pressable: Wanneer je volledige controle wilt over styling en gedrag

Images

Met Image voeg je afbeeldingen toe vanuit de assets-folder.

Stappen

  1. Zet een afbeelding in de assets folder, bijvoorbeeld logo.png
  2. Importeer de afbeelding in je component
  3. Gebruik de Image component

Voorbeeld

import { Image } from 'react-native';

<Image 
  source={require('./assets/logo.png')} 
  style={{ width: 100, height: 100 }} 
/>

Let op: Je MOET altijd een width en height opgeven bij images!

ImageBackground

Met ImageBackground gebruik je een afbeelding als achtergrond vanuit de assets-folder.

Voorbeeld

import { ImageBackground, Text } from 'react-native';

<ImageBackground 
  source={require('../assets/background.jpg')} 
  style={{ width: '100%', height: 200 }}
>
  <Text style={{ color: 'white' }}>
    Tekst op een achtergrond
  </Text>
</ImageBackground>

Tip: ImageBackground werkt als een View, dus je kunt er andere componenten in plaatsen!

Samenvatting

View

Container voor andere componenten, zoals een div in HTML

Text

Voor het weergeven van tekst op het scherm

Button

Simpele knop, niet te stylen

Pressable

Volledig aanpasbare knop met styling

Image

Toon afbeeldingen uit de assets folder

ImageBackground

Gebruik een afbeelding als achtergrond

Je hebt nu geleerd:

  • De basis componenten van React Native
  • Het verschil tussen HTML en React Native componenten
  • Het verschil tussen Button en Pressable
  • Afbeeldingen toevoegen aan je app
  • ImageBackground gebruiken voor achtergronden