Wat is React Inheems?

React Native is een open-source framework ontwikkeld door Facebook dat ontwikkelaars in staat stelt om mobiele applicaties te bouwen met JavaScript en React. In tegenstelling tot traditionele hybride benaderingen die webviews weergeven, compileert React Native naar native platformcomponenten. Dit betekent dat de interface van de app is gebouwd met echte native views (zoals op iOS en op Android), resulterend in prestaties die nauw overeenkomen met volledig native apps. Het kader maakt ook significante code delen over iOS en Android . 80-90% . .dramatisch verminderen van de ontwikkeling tijd en onderhoudskosten.

React Native werd voor het eerst uitgebracht in 2015 en is sindsdien goedgekeurd door grote bedrijven, waaronder Instagram, Shopify en Discord. De levendige gemeenschap en het ecosysteem van bibliotheken maken het een praktische keuze voor startups en bedrijven.

Aan de slag met React Native: Environment Setup

Voordat u een React Native code schrijft, moet u uw ontwikkelomgeving instellen. De exacte stappen verschillen afhankelijk van of u iOS, Android of beide targets gebruikt, en of u de React Native CLI of Expo gebruikt.

Vereisten

  • Node.js & npm (of garen): Versie 18 of nieuwer wordt aanbevolen. Downloaden van nodejs.org.
  • Watchman (macOS/Linux): Een bestands-bespiedingtool van Facebook die de prestaties verbetert. Installeer via Homebrew ().
  • Xcode (alleen iOS): Vereist voor het bouwen en testen van iOS-simulatoren. Downloaden vanuit de Mac App Store. Zorg ervoor dat u de nieuwste Xcode Command Line-tools geïnstalleerd heeft.
  • Android Studio (alleen Android): Vereist voor Android-emulatoren en gereedschap. Stel een Android Virtual Device (AVD) in tijdens installatie.

Kiezen tussen reacteer Native CLI en Expo

Er bestaan twee primaire manieren om een React Native project te starten:

  • React Native CLI: De kale-metal benadering. Je hebt volledige controle over de inheemse code en kan elke native module integreren. Beste voor projecten die aangepaste native functies of prestatieoptimalisaties vereisen.
  • Expo: Een beheerd kader gebouwd op de top van React Native. Het abstracteert de meeste inheemse configuratie en biedt een rijke set van voorgebouwde modules (camera, push notificaties, enz.). Ideaal voor snelle prototypes en projecten die niet aangepaste native code nodig hebben. Lees meer op expo.dev.

Voor deze gids gebruiken we de React Native CLI omdat het je de meest flexibiliteit geeft. Om een nieuw project te maken, start je:

npx @react-native-community/cli init MyApp

Na initialisatie, navigeer in de projectmap en voer uit om de Metro bundelaar te starten. Open vervolgens een tweede terminal en voer of uit om de app op een emulator of apparaat te starten.

Kernbegrippen in React Native

Mastering React Native vereist begrip van de kern bouwblokken .Veel van die zijn directe uitbreidingen van React voor het web.

Componenten

Alles in React Native is een component. Het kader biedt een set van kerncomponenten die in kaart brengen naar native UI elementen:

  • .Een container die lay-out ondersteunt met Flexbox, styling en touch handling. Equivalent met op het web.
  • .Voor het weergeven van tekst moet je in tegenstelling tot web HTML een tekst inpakken .
  • . . Weergave lokale of externe afbeeldingen.
  • . . Een tekstinvoerveld.
  • . Een beeld reageert op kranen met een visuele feedback.
  • .Hoog presterende lijstcomponent voor grote gegevensreeksen.

U kunt ook aangepaste componenten samenstellen door deze primitieven te combineren. Controleer voor een volledige lijst de officiële React Native documentatie.

Staat en voor zitters

Dit zijn dezelfde concepten als in React voor het web:

  • Props: Kort voor eigenschappen. Het zijn alleen-lezen waarden die van een oudercomponent naar een kindcomponent worden doorgegeven. Ze configureren het gedrag of uiterlijk van het kind.
  • State: Veranderbare gegevens die binnen een component worden beheerd. Wanneer de toestand verandert, wordt de component opnieuw gerenderd. Gebruik -haak (functionele componenten) of ] (klassecomponenten).

Voorbeeld:

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

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

Navigatie is niet ingebouwd in React Native core. De meest populaire oplossing is React Navigatie. Het biedt een stack navigator (zoals een navigatie stack), een tabnavigator en een lade navigator. Installeer het met:

npm install @react-navigation/native @react-navigation/stack

Na installatie, wrap uw app met en definieer uw schermen:

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

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Styling

React Native maakt gebruik van JavaScript-objecten voor styling in plaats van CSS. U definieert stijlen met of inline-objecten. De lay-out-engine is standaard Flexbox, met eigenschappen als , , . Er zijn geen CSS media-queries; responsief ontwerp wordt bereikt door de ] API of bibliotheken zoals .

Bouwen van uw eerste Cross-Platform App: Een stap-voor-stap voorbeeld

Laten we een eenvoudige weerapp bouwen die data ophaalt van een publieke API en deze op beide platforms toont. Dit zal het staatbeheer, netwerkverzoeken en componentsamenstelling demonstreren.

Stap 1: Projectopstelling

Maak een nieuw project met behulp van de React Native CLI:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Stap 2: Afhankelijkheden installeren

We hebben een paar pakketten nodig:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Voor de API-oproep gebruiken we de ingebouwde API. Optioneel installeren we voor pictogrammen.

Stap 3: Bouw het thuisscherm

Aanmaken :

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Stap 4: Draad-up navigatie

In importeer je de navigator en het scherm:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Stap 5: Start de app

Start metro bundelder (), dan draaien op Android () of iOS (). U moet een tekstinvoer, een knop en weergegevens na een succesvolle API-oproep zien.

Deze basisapp werkt op beide platforms met identieke JavaScript-code. Dat is de kracht van React Native.

Voordelen van het gebruik van React Inheems

  • Code Herbruikbaarheid: Deel bedrijfslogica, state management en UI-componenten over platforms. U kunt zelfs code hergebruiken met een webapp met React Native voor Web.
  • Prestatie: Bijna-native prestaties omdat de UI wordt weergegeven met behulp van native componenten, niet web views. De JavaScript-thread draait asynchroon, en zware berekeningen kunnen worden uitgeschakeld naar native modules.
  • Grote Community & Ecosystem: Duizenden bibliotheken, een levendige gemeenschap op GitHub, en uitgebreide tooling. Problemen zijn goed gedocumenteerd, en plugins bestaan voor bijna elke behoefte.
  • Snelle ontwikkeling met Hot Reload: De Metro bundelaar ondersteunt Hot Module Replacement (HMR). U kunt de code bewerken en veranderingen direct zien zonder de hele app opnieuw te maken.
  • Over-the-Air Updates: Met diensten zoals Microsoft App Center of CodePush kunt u JavaScript en activa updates rechtstreeks naar gebruikers duwen zonder goedkeuring van de app-opslag.
  • Kosteneffectief: Eén team kan één codebase behouden in plaats van twee afzonderlijke inheemse teams. Dit vermindert zowel de ontwikkelings- als onderhoudskosten.

Uitdagingen en beperkingen

Ondanks zijn sterke punten, React Native is geen zilveren kogel:

  • Native Modules: Wanneer u toegang moet krijgen tot de functies van het apparaat die niet worden bestreken door de kernbibliotheken of community libraries (bijv. geavanceerde Bluetooth, aangepaste camerafilters), moet u platformspecifieke code schrijven in Java/Kotlin (Android) of Objective-C/Swift (iOS). Dit vereist eigen ontwikkelingsexpertise.
  • Prestatieknelpunten: React Native is gebaseerd op een brug tussen JavaScript en inheemse draden. Zeer complexe animaties, real-time graphics (zoals 3D-games), of zware gegevensverwerking kan jank veroorzaken. Voor de meeste zakelijke apps, prestaties is voldoende, maar voor games of intensieve apps te overwegen Flutter of volledig native.
  • Debugging Complexity: Terwijl de debugging tools zijn verbeterd, kunnen probleemoplossing platform-specifieke bugs lastig zijn. Problemen kunnen alleen optreden op bepaalde Android-apparaten of iOS-versies. De React Native community en tools zoals Flipper-hulp, maar de debugervaring is niet zo naadloos als de native ontwikkeling.
  • UI Consistentie: Omdat elk platform componenten anders maakt (bv. heeft verschillende verschijningen op iOS en Android), moet u mogelijk platformspecifieke stijlen of componenten schrijven. De API helpt het OS te detecteren, maar het behoud van een echt pixel-perfect ontwerp op beide platformen kan tijdrovend zijn.
  • Maat van de App:] React Native apps hebben de neiging om groter dan volledig native apps als gevolg van de opname van de JavaScript motor (Hermes of JavaScriptCore). De gemiddelde grootte is 10

Geavanceerde onderwerpen: Wanneer u meer nodig heeft

Interageren met inheemse modules

Om de kloof te overbruggen wanneer een JavaScript-bibliotheek niet bestaat, kunt u een native module schrijven. Bijvoorbeeld om een hardwaresensor te gebruiken die niet ondersteund wordt door een community-pakket:

  • Op Android: Maak een Java-klasse die zich uitbreidt en registreer het bij het pakket.
  • Op iOS: Maak een Swift/ObjC-klasse aan die het protocol implementeert.
  • Noem het dan van JavaScript:

Prestatieoptimalisatiestrategieën

  • Gebruik Hermes: Hermes is een JavaScript-motor die geoptimaliseerd is voor mobiel. Schakel het in in uw en . Het vermindert de opstarttijd en het geheugengebruik.
  • FlatList vs ScrollBekijk: Gebruik of ] voor lange lijsten. Ze recyclen weergaven en voorkomen dat het renderen van off-screen items.
  • Memoisatie: Gebruik en om onnodige herrendering te voorkomen.
  • InteractieManager: Verlaag zware berekeningen tot na animaties of overgangen voltooid zijn.
  • Native Driver for Animations: Gebruik bij het animeren van niet-layout eigenschappen (opacity, transform). Dit verwijdert animaties naar de oorspronkelijke draad.
  • Afbeelding Caching: De standaardcomponent vervangen door (van ) voor een beter geheugenbeheer en caching.

Uw app testen

React Native ondersteunt verschillende teststrategieën:

  • Eenheidstest: Gebruik Jest (voorgeconfigureerd) voor het testen van pure functies en logica.
  • Component testen: Gebruik Native Testing Library om componenten te maken en gebruikersinteracties te testen.
  • End-to-End Testing: Detox by Wix is een populair grijs-box E2E testkader dat draait op werkelijke apparaten en simulatoren. Het simuleert handelingen van gebruikers en controleert de UI-toestand.

Implementatie naar App Stores

Zorg ervoor dat u voor het implementeren een productie-klaar bouwproces heeft:

  • Configureer app pictogrammen en spatschermen voor beide platformen.
  • Stel de app versie en het bouwnummer in en de native configuratiebestanden.
  • Voor Android: Genereer een ondertekende APK of AAB met behulp van de Android Studio keystore. Vervolgens uploaden naar Google Play Console.
  • Voor iOS: Archiveer de app in Xcode (Product > Archive), teken met een distributiecertificaat en upload via Xcode of Transporter naar App Store Connect.
  • Overweeg het gebruik van continue integratie diensten zoals GitHub Acties of Bitrise om te automatiseren bouwen en ondertekenen.

Real-World Voorbeelden van React Native Apps

  • Instagram (Tabblad / Threads ontdekken): Instagram gebruikt React Native voor delen van zijn app, waaronder het tabblad Explore en de standalone Threads-app. Ze bereikten cross-platform code delen terwijl het behoud van een eigen gevoel.
  • Discord (Mobile): Discord's mobiele app is gebouwd met React Native. Ze maakten gebruik van de Hermes-engine voor het delen van de prestaties en code tussen Android en iOS.
  • Walmart: De retailgigant herbouwde zijn mobiele app met React Native, waarbij hij bijna identieke ervaringen op beide platformen bereikte en de ontwikkelingstijd verkorte.
  • Uber Eats (Restaurant Dashboard): Uber Eats gebruikt React Native voor zijn restaurant-gericht dashboard, waardoor snelle iteratie en cross-platform implementatie.

Conclusie

React Native blijft een top keuze voor cross-platform mobiele ontwikkeling vanwege de balans tussen prestaties, ontwikkelaar ervaring en code herbruikbaarheid. Hoewel het heeft beperkingen . vooral rond grafische-intensieve apps en inheemse module complexiteit blinkt het uit voor de meeste standaard mobiele toepassingen, van e-commerce tot sociale media tot enterprise tools.

Door de kernconcepten (componenten, staat, navigatie, styling) te beheersen, het uitgebreide bibliotheekecosysteem te benutten en beste praktijken voor prestaties en testen te volgen, kunt u hoogwaardige apps leveren aan zowel iOS-gebruikers als Android-gebruikers met één codebase. Gebruik de officiële React Native documentatie[] als uw primaire referentie, en zoek naar community resources zoals React Native Directory[] voor bibliotheken. Start vandaag de dag met bouwen van je eerste cross-platform app is slechts een weg.