Le Guide ultime pour construire des applications multiplateforme avec Réact Native

Qu'est-ce que Réagir natif?

React Native est un cadre open-source développé par Facebook qui permet aux développeurs de construire des applications mobiles en utilisant JavaScript et React. Contrairement aux approches hybrides traditionnelles qui rendent les vues web, React Native compile aux composants de plate-forme native. Cela signifie que l'interface de l'application est construite avec des vues natives réelles (comme sur iOS et sur Android), ce qui entraîne des performances qui correspondent étroitement aux applications entièrement natives.

React Native a été publié pour la première fois en 2015 et a depuis été adopté par de grandes entreprises dont Instagram, Shopify et Discord. Sa communauté dynamique et l'écosystème des bibliothèques en font un choix pratique pour les startups et les entreprises.

Commencer avec Réagir Native : la configuration de l'environnement

Avant d'écrire un code React Native, vous devez configurer votre environnement de développement. Les étapes exactes diffèrent selon que vous ciblez iOS, Android ou les deux, et si vous utilisez le CLI ou Expo React Native.

Préalables

Node.js & npm (ou fil): La version 18 ou plus récente est recommandée. Télécharger à partir de nodejs.org.
Watchman (macOS/Linux):[ Un outil de veille de fichiers par Facebook qui améliore les performances. Installez via Homebrew (.
Xcode (iOS seulement):[ Requis pour la construction et les essais sur les simulateurs iOS. Téléchargez depuis l'App Store Mac. Assurez-vous que vous avez installé les derniers outils de ligne de commande Xcode.
Android Studio (Android seulement):[ Requis pour les émulateurs et les outils Android. Configurez un appareil virtuel Android (AVD) pendant l'installation.

Choisir entre la CLI autochtone réagisse et Expo

Il existe deux façons principales de lancer un projet autochtone React :

React Native CLI:[ L'approche nu-métal. Vous avez le plein contrôle sur le code natif et pouvez intégrer n'importe quel module natif.
Exposer: Un cadre géré construit sur le dessus de React Native. Il enlève la plupart des configurations natives et fournit un ensemble riche de modules pré-construits (caméra, notifications push, etc.). Idéal pour le prototypage rapide et les projets qui n'ont pas besoin de code natif personnalisé. Lire la suite à expo.dev.

Pour ce guide, nous utiliserons l'ICL React Native car elle vous donne la plus grande flexibilité. Pour créer un nouveau projet, lancez :

npx @react-native-community/cli init MyApp

Après initialisation, naviguez dans le dossier du projet et lancez pour lancer le packeur Metro. Puis ouvrez un deuxième terminal et lancez ou pour lancer l'application sur un émulateur ou un périphérique.

Concepts fondamentaux dans la réaction des Autochtones

Maîtriser React Native exige de comprendre ses éléments de base, dont beaucoup sont des extensions directes de React pour le web.

Composantes

Tout dans React Native est un composant. Le cadre fournit un ensemble de composants de base qui map aux éléments d'interface utilisateur natifs:

— Un conteneur qui supporte la mise en page avec Flexbox, le style et la manipulation tactile. Équivalent à sur le web.
— Pour afficher du texte. Contrairement au web HTML, vous devez envelopper tout texte à l'intérieur .
— Affiche des images locales ou distantes.
— Un réservoir à défilement générique.
— Un champ d'entrée de texte.
— Permet à une vue de répondre aux robinets avec une rétroaction visuelle.
— Composante de liste haute performance pour les grands ensembles de données.

Vous pouvez également composer des composants personnalisés en combinant ces primitives. Pour une liste complète, consultez la documentation officielle React Native.

État et prop.

Ce sont les mêmes concepts que dans React pour le web:

Props: Court pour les propriétés. Ce sont des valeurs en lecture seule transmises d'un composant parent à un composant enfant. Ils configurent le comportement ou l'apparence de l'enfant.
État: Données mutables gérées au sein d'un composant. Lorsque l'état change, le composant re-rend. Utilisez crochet (composants fonctionnels) ou (composants de classe).

Exemple :

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;

La navigation n'est pas intégrée au cœur de React Native. La solution la plus populaire est React Navigation. Elle fournit un navigateur de pile (comme une pile de navigation), un navigateur de onglets et un navigateur de tiroirs. Installez-la avec:

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

Après l'installation, enveloppez votre application avec et définissez vos écrans:

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>
 );
}

Échelle

React Native utilise des objets JavaScript pour le style plutôt que CSS. Vous définissez des styles en utilisant ou des objets en ligne. Le moteur de mise en page est Flexbox par défaut, avec des propriétés comme , , . Il n'y a pas de requêtes CSS; le design réactif est réalisé par l'API ou des bibliothèques comme .

Construire votre première application multiplateforme : un exemple étape par étape

Construisons une application météo simple qui récupère les données d'une API publique et les affiche sur les deux plateformes. Cela démontrera la gestion de l'état, les requêtes réseau et la composition des composants.

Étape 1: Mise en place du projet

Créer un nouveau projet en utilisant l'ICN React Native :

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

Étape 2: Installer les dépendances

Nous avons besoin de quelques paquets:

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

Pour l'appel API, nous utiliserons l'API intégrée . Installez optionnellement pour les icônes.

Étape 3: Construire l'écran d'accueil

Créer :

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;

Dans , importer le navigateur et l'écran:

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>
 );
}

Étape 5: Lancez l'application

Démarrez le package Metro (), puis exécutez sur Android () ou iOS (). Vous devriez voir une entrée de texte, un bouton et des données météorologiques après un appel API réussi.

Cette application de base fonctionne sur les deux plateformes avec le code JavaScript identique. C'est la puissance de React Native.

Avantages de l'utilisation de Réagir Native

Reusabilité du code:[ Partagez la logique d'affaires, la gestion de l'état et les composants d'interface utilisateur sur toutes les plateformes.
Performance:[ Performances quasi indigènes car l'interface utilisateur est rendue en utilisant des composants natifs, pas des vues web. Le thread JavaScript fonctionne asynchronement, et des calculs lourds peuvent être déchargés vers des modules natifs.
Large Community & Ecosystem:[ Des milliers de bibliothèques, une communauté dynamique sur GitHub, et un outillage étendu. Les problèmes sont bien documentés, et des plugins existent pour presque tous les besoins.
Développement rapide avec Hot Reload:[ Le packeur Metro prend en charge le remplacement de module à chaud (HMR). Vous pouvez modifier le code et voir les modifications instantanément sans reconstruire l'application entière.
Mise à jour en direct :[ Avec des services comme Microsoft App Center ou CodePush, vous pouvez appuyer sur JavaScript et les mises à jour d'actifs directement aux utilisateurs sans approbation de l'application.
Coût-Effectif: Une équipe peut maintenir une base de codes unique au lieu de deux équipes natives distinctes, ce qui réduit les coûts de développement et de maintenance.

Défis et limites

Malgré ses forces, React Native n'est pas une balle d'argent :

Modules Natifs: Lorsque vous devez accéder à des fonctionnalités de périphérique non couvertes par les bibliothèques de base ou de communauté (p. ex. Bluetooth avancé, filtres de caméra personnalisés), vous devez écrire un code spécifique à la plate-forme en Java/Kotlin (Android) ou Objectif-C/Swift (iOS).
React Native compte sur un pont entre JavaScript et les fils natifs. Des animations très complexes, des graphiques en temps réel (comme les jeux 3D), ou le traitement de données lourdes peuvent causer jank. Pour la plupart des applications d'affaires, la performance est adéquate, mais pour les jeux ou les applications intensives considèrent Flutter ou natif complet.
Débogage Complexité: Bien que les outils de débogage se soient améliorés, le dépannage des bogues spécifiques à la plate-forme peut être difficile. Les problèmes peuvent se produire uniquement sur certains appareils Android ou versions iOS. La communauté React Native et des outils comme l'aide de Flipper, mais l'expérience de débogage n'est pas aussi transparente que le développement natif.
Consistance UI: Parce que chaque plateforme rend les composants différemment (p. ex., ] a des apparences différentes sur iOS et Android), vous pouvez avoir besoin d'écrire des styles ou des composants spécifiques à la plateforme. L'API aide à détecter le système d'exploitation, mais maintenir un design vraiment parfait pixel sur les deux plateformes peut prendre du temps.
Taille de l'application: Les applications Natives réagissent ont tendance à être plus grandes que les applications entièrement natives en raison de l'inclusion du moteur JavaScript (Hermes ou JavaScriptCore). La taille moyenne est de 10 à 20 Mo de plus qu'un équivalent natif.

Sujets avancés : Quand vous avez besoin de plus

Interagir avec les modules autochtones

Pour combler l'écart lorsqu'une bibliothèque JavaScript n'existe pas, vous pouvez écrire un module natif. Par exemple, pour utiliser un capteur matériel non pris en charge par un paquet communautaire :

Sur Android : Créez une classe Java qui étend et enregistrez-la avec le paquet.
Sur iOS : créez une classe Swift/ObjC qui implémente le protocole .
Puis appelez-le de JavaScript:

Stratégies d'optimisation des performances

Utilisez Hermes: Hermes est un moteur JavaScript optimisé pour mobile. Activez-le dans votre et . Il réduit l'utilisation du temps et de la mémoire de démarrage.
FlatList vs ScrollView: Utilisez ou pour les longues listes. Ils recyclent les vues et évitent de rendre les éléments hors écran.
Mémoisation: Utiliser et pour empêcher les ré-releveurs inutiles.
InteractionManager:[ Déplacer les calculs lourds jusqu'à ce que les animations ou les transitions soient terminées.
Native Driver for Animations:[ Utilisez pour animer des propriétés non-layout (opacity, transform).
Image en cache : Remplacer le composant standard par (à partir de ) pour une meilleure gestion de la mémoire et une meilleure mise en cache.

Tester votre application

Réagir Native appuie diverses stratégies d'essai :

Test unitaire: Utilisez Jest (préconfiguré) pour tester des fonctions et une logique pures.
Essais de composants:[ Utilisez la bibliothèque de tests native React pour rendre les composants et tester les interactions utilisateur.
Test de bout en bout:[ Detox by Wix est un cadre de test E2E populaire qui fonctionne sur des appareils et simulateurs réels. Il simule les actions de l'utilisateur et vérifie l'état de l'interface utilisateur.

Déploiement dans les App Stores

Avant de vous déployer, assurez-vous d'avoir une construction prête à la production :

Configurez les icônes d'application et les écrans de projection pour les deux plateformes.
Définir la version de l'application et construire le numéro dans et les fichiers de configuration natifs.
Pour Android : Générez un APK ou AAB signé en utilisant le keystore Android Studio. Puis téléchargez sur Google Play Console.
Pour iOS : Archivez l'application dans Xcode (Product > Archive), signez avec un certificat de distribution et téléchargez-la via Xcode ou Transporter vers App Store Connect.
Envisagez d'utiliser des services d'intégration continue comme GitHub Actions ou Bitrise pour automatiser la construction et la signature.

Exemples d'applications autochtones réagisses dans le monde réel

Instagram (Explorer Tab / Threads): Instagram utilise React Native pour certaines parties de son application, y compris l'onglet Explorer et l'application de threads autonome. Ils ont obtenu le partage de code multiplateforme tout en maintenant une sensation native.
Discord (Mobile):[ Discord est construit avec React Native. Ils ont profité du moteur Hermes pour les performances et le partage de code entre Android et iOS.
Walmart: Le géant du commerce de détail a reconstruit son application mobile en utilisant React Native, réalisant des expériences presque identiques sur les deux plateformes et réduisant le temps de développement.
Uber Eats (Restaurant Dashboard):[ Uber Eats utilise React Native pour son tableau de bord orienté restaurant, permettant une itération rapide et un déploiement multiplateforme.

Conclusion

React Native reste un choix de choix pour le développement mobile multiplateforme en raison de son équilibre entre performance, expérience du développeur et réutilisabilité du code. Bien qu'il ait des limites – surtout autour des applications à forte intensité de graphisme et de la complexité des modules natifs – il excelle pour la plupart des applications mobiles standard, du commerce électronique aux médias sociaux aux outils d'entreprise.

En maîtrisant les concepts de base (composants, état, navigation, style), en tirant parti de l'écosystème de la bibliothèque et en suivant les meilleures pratiques pour la performance et les tests, vous pouvez fournir des applications de haute qualité aux utilisateurs iOS et Android avec une base de code unique. Utilisez le React Native documentation[ comme votre référence principale, et explorez des ressources communautaires comme React Native Directory pour les bibliothèques.