Het bouwen van applicaties die de moedertaal van de gebruiker spreken is niet langer een luxe . Het is een zakelijke noodzaak. Aangezien mobiel gebruik blijft exploderen wereldwijd, gebruikers verwachten apps te voelen lokale, van de tekst die ze lezen tot de manier waarop nummers en data worden geformatteerd. React Native, het cross-platform kader ontwikkeld door Meta, stelt ontwikkelaars om performante mobiele apps voor iOS en Android te bouwen vanaf een enkele codebase. Het toevoegen van meertalige ondersteuning aan dergelijke apps, echter, vereist zorgvuldige planning en de juiste tooling. Deze uitgebreide gids loopt u door de basisprincipes van lokalisatie in React Native, introduceert de meest populaire bibliotheken, en biedt actieerbare stappen om een productie-ready meertalige applicatie te creëren.

Lokalisatie vs. internationalisering: Definieer de voorwaarden

Voordat je in code gaat duiken, is het belangrijk om twee verwante concepten te onderscheiden. [Internationalisering (i18n) is het proces van het ontwerpen van je applicatie zodat het kan worden aangepast aan verschillende talen en regio's zonder dat technische veranderingen vereist zijn. Het gaat om het extraheren van tekst, het gebruik van lokale-bewuste formattering voor data en getallen, en planning voor verschillende schrijfsystemen. Localisatie (l10n)[] is de feitelijke aanpassing van je app aan een specifieke taal of regio die strings vertaalt, het aanpassen van layout voor rechts-naar-linkse scripts, en het omgaan met lokale conventies.

React Native zelf biedt slechts een paar basis API's voor lokale detectie (bijv. van de module), maar volledige lokalisatie vereist een toegewijde bibliotheek om vertaalbronnen, taalschakelingen en formattering te beheren. Het ecosysteem biedt verschillende volwassen opties, elk met zijn eigen sterke punten.

Kernlokalisatiebibliotheken voor React Native

Drie bibliotheken domineren het React Native localisatielandschap. Het begrijpen van hun rollen en hoe ze elkaar aanvullen is de eerste stap naar een robuuste implementatie.

reactie-i18next

Gebouwd bovenop i18next, een van de meest populaire internationaliseringskaders voor JavaScript, is een complete oplossing voor vertaalbeheer. Het biedt React-haken (), Hogere-Order Componenten, en een vertaalcomponent die automatisch opnieuw draait wanneer de taal verandert. De bibliotheek ondersteunt namenpacing (het verdelen van vertalingen in afzonderlijke bestanden), interpolatie, pluralisatie, contextspecifieke vertalingen en geavanceerde taaldetectie.

Belangrijkste voordelen van react‐i18next zijn onder andere het rijke plugin ecosysteem en de mogelijkheid om vertalingen te laden op aanvraag (door middel van route of functie). Het werkt ook naadloos met server-side rendering en kan worden gebruikt in niet-React delen van uw Android-of iOS-native code via de onderliggende i18next engine.

reactie-native-lokalisatie

Terwijl react‐i18next vertaallogica behandelt, behandelt de lokale informatie aan de apparaatzijde. Het stelt de huidige locale, tijdzone, temperatuureenheid, meetsysteem en kalendertype van de gebruiker bloot. Deze waarden zijn van cruciaal belang voor het correct formatteren van nummers, data en valuta's. Omdat React Native-apps op twee verschillende platformen draaien, werd deze informatie oorspronkelijk gebruikt om lastig te zijn; ] wrapt de oorspronkelijke API's en maakt ze beschikbaar als een eenvoudig JavaScript-object.

U kunt reaction-native-localize combineren met reaction-i18next door de gedetecteerde taal in de i18next initialisatie te voeren. Dit geeft u een naadloze, apparaatgestuurde ervaring: wanneer de gebruiker van taal verandert, schakelt de app automatisch over op de bijbehorende vertaling.

i18n‐jsunit synonyms for matching user input

Voor kleinere projecten of ontwikkelaars die liever een lichtgewicht aanpak, biedt een minimalistische API. Het biedt eenvoudige vertaling lookups, pluralisatie regels, en datum/aantal formattering. Echter, het ontbreekt ingebouwde taaldetectie en niet integreert met React's component lifecycle. Veel teams gebruiken het als een utility module voor niet-UI vertalingen (bijvoorbeeld in Redux reducties of API helpers) terwijl het vertrouwen op react‐i18next voor componenten.

Een opkomende alternatief is , dat is opgenomen in het ecosysteem van Expo. Het weerspiegelt de mogelijkheden van reaction-native-localize maar is afgestemd op Expo-beheerde workflows. Als je bouwt met Expo, is vaak de gemakkelijkste manier om lokale gegevens te verkrijgen.

Bouwen aan een meertalige app: stapsgewijze uitvoering

Laten we door het proces van het toevoegen van lokalisatie aan een nieuw React Native project met behulp van de meest voorkomende stack: react‐i18next voor vertalingen en react‐native-lokaliseren voor apparaatlokalisatie.

1. Installeer afhankelijkheden

Voer het volgende commando uit om zowel bibliotheken als hun collega's toe te voegen:

npm install react-i18next i18next react-native-localize

Als u Expo gebruikt, installeer in plaats van en voeg de en pakketten toe.

2. Configureer i18next

Maak een bestand (of voor TypeScript) in de root van uw project. Dit bestand zal de i18next instantie instellen, vertaalbronnen importeren en de locale detector integreren.

Hieronder volgt een typische configuratie:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'react-native-localize';

import en from './locales/en.json';
import es from './locales/es.json';
import fr from './locales/fr.json';
import de from './locales/de.json';

// Detect device language
const languageDetector = {
 type: 'languageDetector',
 async: false,
 detect: () => {
 const locales = getLocales();
 return locales[0]?.languageCode ?? 'en';
 },
 init: () => {},
 cacheUserLanguage: () => {},
};

i18n
 .use(languageDetector)
 .use(initReactI18next)
 .init({
 resources: {
 en: { translation: en },
 es: { translation: es },
 fr: { translation: fr },
 de: { translation: de },
 },
 fallbackLng: 'en',
 interpolation: {
 escapeValue: false, // React already safes from XSS
 },
 });

export default i18n;

Deze configuratie gebruikt reaction-native-localize's om de primaire apparaattaal op te halen. De terugvaltaal zorgt ervoor dat ontbrekende vertalingen de UI niet breken.

3. Maak Vertaling JSON-bestanden

In een map, maak aparte JSON-bestanden voor elke ondersteunde taal. Bijvoorbeeld:

{
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!",
 "notifications": {
 "new_message": "You have {{count}} new message",
 "new_message_plural": "You have {{count}} new messages"
 }
}

{
 "welcome": "Bienvenido",
 "greeting": "¡Hola, {{name}}!",
 "notifications": {
 "new_message": "Tienes {{count}} mensaje nuevo",
 "new_message_plural": "Tienes {{count}} mensajes nuevos"
 }
}

Let op de achtervoegsel .i18next verwerkt automatisch meervoudsformulieren op basis van de telling die wordt gegeven bij het aanroepen van de vertaalfunctie.

4. Wikkel de App met een i18next Provider

In je root component (bv. ) importeer je de i18n configuratie en wikkel je alles in met de (facultatief maar aanbevolen voor testbaarheid). In de meeste gevallen is het gewoon importeren voldoende omdat het registreert met de context van React.

import React from 'react';
import { SafeAreaView } from 'react-native';
import './i18n'; // Ensure i18n is initialized before any component
import MainScreen from './screens/MainScreen';

const App = () => (
 <SafeAreaView style={{ flex: 1 }}>
 <MainScreen />
 </SafeAreaView>
);

export default App;

5. Gebruik vertalingen binnen componenten

Gebruik de -haak binnen een functioneel onderdeel om toegang te krijgen tot de -functie:

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

const MainScreen = () => {
 const { t, i18n } = useTranslation();

 const changeLanguage = (lng) => {
 i18n.changeLanguage(lng);
 };

 return (
 <View>
 <Text>{t('welcome')}</Text>
 <Text>{t('greeting', { name: 'Maria' })}</Text>
 <Button title="Español" onPress={() => changeLanguage('es')} />
 <Button title="Français" onPress={() => changeLanguage('fr')} />
 </View>
 );
};

export default MainScreen;

De functie herevalueert automatisch wanneer de taal verandert en de component her-rendert dankzij de integratie van de context React.

Geavanceerde lokalisatie-functies

Naast eenvoudige vertaling met sleutelwaarde, hebben productie-apps ondersteuning nodig voor pluralisatie, datum-/nummeropmaak en rechts-naar-links (RTL) lay-out-aanpassing.

Vermenigvuldiging en context

i18next gebruikt het ICU-berichtformaat om meervoudsregels te hanteren. Het voorbeeld hierboven met en toont het eenvoudigste geval. Voor talen met meer complexe meervoudsregels (bv. Arabisch, Russisch) kunt u aanvullende formulieren zoals , of gebruik maken van de variabele binnenin interpolatie.

// Example for Russian
{
 "unread_messages": "{{count}} непрочитанное сообщение",
 "unread_messages_few": "{{count}} непрочитанных сообщения",
 "unread_messages_many": "{{count}} непрочитанных сообщений"
}

Om data en nummers te formatteren, kunt u de API (beschikbaar in moderne JavaScript-motoren) gebruiken of op een bibliotheek zoals Luxon of date‐fns. Een gemeenschappelijk patroon is het creëren van nutsfuncties die een lokale string accepteren en geformatteerde waarden teruggeven, en deze dan naast uw vertalingen gebruiken.

React Native heeft ingebouwde ondersteuning voor RTL-talen zoals Arabisch en Hebreeuws. Schakel het in door de en in uw rootbestand in te stellen, gebaseerd op de huidige taal. Wanneer de gebruiker overschakelt naar een RTL-lokaal, moeten alle flexbox-richtingen automatisch omslaan. U moet er echter voor zorgen dat uw stijlen logische eigenschappen gebruiken (bv. ) in plaats van ) om harde-gecodeerde richtingen te vermijden.

import { I18nManager } from 'react-native';

// Inside your language switch handler:
if (newLanguage === 'ar') {
 I18nManager.forceRTL(true);
} else {
 I18nManager.forceRTL(false);
}

Let op dat het schakelen van RTL een volledige app herstart op sommige Android-versies vereist. U kunt de gebruiker waarschuwen of een herstart uitvoeren met behulp van .

Beste praktijken voor productie-klare lokalisatie

Het krijgen van de basisprincipes werken is een ding; het bouwen van een onderhoudbare, schaalbare lokalisatie systeem is een andere. De volgende beste praktijken zal u tijd besparen en te voorkomen dat frustrerende bugs.

Vertalingsbestanden per functie organiseren

Grote apps moeten voorkomen dat een monolithisch JSON-bestand per taal. In plaats daarvan, gebruik i18next de naamruimte functie van de gebruiker om vertalingen te splitsen op functie of scherm. Bijvoorbeeld, [, ]. Dit houdt bestanden klein en maakt het samenvoegen van trekverzoeken gemakkelijker. Laad namespaces op verzoek met de -haakoproep.

Altijd een terugvaltaal verstrekken

Uw app mag nooit crashen omdat er een vertaalsleutel ontbreekt. Definieer een fallback taal (meestal Engels) die elke sleutel bevat die in de app wordt gebruikt. Als een sleutel niet bestaat in de taal van de gebruiker, zal i18next de fallback waarde weergeven. Dit is vooral belangrijk tijdens vroege ontwikkeling wanneer niet alle vertalingen zijn voltooid.

Gebruik een sleutelnaam conventie

Neem een consistente structuur voor uw vertaalsleutels. Gemeenschappelijke conventies omvatten het gebruik van puntnotatie ([], ) of het nabootsen van de componenthiërarchie (). Sleutels moeten beschrijvend genoeg zijn om hun gebruik snel te kunnen lokaliseren.

Aparte tekstvertalingen van inhoud

Niet alles wat in de UI verschijnt is een statische string. Gebruiker gegenereerde inhoud, productnamen of dynamische gegevens mogen niet worden doorgegeven door de functie hebben ze hun eigen opslag en opmaak logica nodig. Houd vertaling bronnen puur voor toepassing labels, fouten en berichten.

Vertalingswerkstromen automatiseren

Voor teams met professionele vertalers, overwegen integratie met een vertaalbeheersysteem (TMS) zoals Lokalise, Crowdin of Phrase. Deze platforms verbinden met uw code repository, push bijgewerkte bron strings, en trek vertaalde bestanden terug. Deze automatisering voorkomt oude vertalingen en vermindert handmatige inspanning.

Gelokaliseerde apps testen

Meertalige toepassingen testen vereist meer dan alleen controleren of de tekst verandert. U moet controleren of alle elementen correct zijn aangepast, dat de lay-outs niet breken, en dat gegevensopmaak overeenkomt met de locale van de gebruiker.

Verschillende locales op simulaties simuleren

Zowel Xcode als Android Studio kunt u de regio en taal van het apparaat instellen. Voor iOS kunt u de taal in de Run-opties van het schema wijzigen; voor Android kunt u een nieuwe emulator maken met een aangepaste locale. Test elke ondersteunde taal op beide platformen om platformspecifieke eigenaardigheden te ontdekken (bijvoorbeeld datumplukkers kunnen uw gekozen locale op oudere Android-versies niet respecteren).

Eenheid Test Vertalingen Opzoeken

Schrijf unit testen voor uw i18n configuratie om ervoor te zorgen dat alle toetsen correct oplossen voor de basis en terugval talen. Gebruik een testframe zoals Jest om de configuratie en oproep voor elke taal te laden. Een ontbrekende sleutel zal verschijnen als ] in de uitvoer, waardoor het gemakkelijk te detecteren.

import i18n from '../i18n';

test('all translation keys exist in English', () => {
 const keys = ['welcome', 'greeting', 'notifications.new_message'];
 keys.forEach(key => {
 expect(i18n.t(key)).not.toBe(key);
 });
});

Visueel regressieonderzoek

Lange teksttekens in talen zoals Duits of Fins kunnen leiden tot overloop van lay-out. Gebruik snapshot testen (bijv., Jest snapshots met verschillende lokale configuraties) of speciale visuele regressie tools zoals Percy om UI breken te vangen. Simuleer RTL-modus door het forceren van in uw testomgeving.

Prestatieoverwegingen

Localisatie mag de prestaties van de app niet in gevaar brengen. Hier zijn een paar tips om uw app snel te houden.

  • Laad vertalingen lui: Gebruik i18next's optie of dynamische import om taalbestanden alleen op te halen wanneer nodig. Dit vermindert de initiële bundelgrootte.
  • Vermijd re-registring resources: Initialiseer uw i18n instantie eenmaal bij het opstarten van de app. Het wijzigen van de taal zou niet nodig moeten zijn om alle vertaalbestanden van het netwerk te herladen.
  • Geformatteerde waarden in geheugen zetten: Als u dure datum of nummer in een renderlus uitvoert, wikkel het resultaat dan in ] om herberekeningen bij elke re-render te voorkomen.
  • Voor apps die offline taalschakeling mogelijk maken, kunt u vertalingen opslaan in AsyncStorage of een soortgelijke lokale database.

Conclusie

Het creëren van een meertalige React Native app omvat meer dan alleen het uitwisselen van strings. Het vereist een doordachte architectuur die de apparaatlokale detectie, vertaalbeheer, pluralisatie, nummer/datum formatteren, en RTL lay-out behandelt. Door het kiezen van een robuuste bibliotheek zoals react-i18next gekoppeld aan react-native-localize, kunt u een ervaring opbouwen die eigen is aan gebruikers in elke hoek van de wereld.

Onthoud dat lokalisatie een doorlopend proces is.Vertalingen moeten updates, nieuwe talen kunnen worden toegevoegd, en culturele nuances moeten worden gerespecteerd. Investeer in het vroeg toolen, fixeer duidelijke workflows met uw vertaalteam, en test meedogenloos. De inspanning loont af in tevredenheid van de gebruiker, hogere retentie, en uitgebreide markt bereik.

Voor meer informatie, raadpleeg de officiële documentatie van react‐i18next en react‐native‐localize. Je zou ook de i18next plugin list kunnen vinden die nuttig is voor het uitbreiden van functionaliteit. Met de juiste strategie kan je React Native app vloeiend elke taal spreken.