Editions ENI Livres | Vidéos | e-Formations
Développer pour le mobile avec React Native
Introduction
React Native est un framework de développement d’applications mobiles qui vous permet de créer des applications natives pour iOS et Android en utilisant des composants React.
Présentation de React Native
React Native est conçu pour faciliter le développement d’applications mobiles en utilisant des connaissances en React.
1. Composants natifs
Contrairement au développement web avec React, où nous utilisons des composants HTML, React Native va nous fournir des composants spécifiques. Par exemple, au lieu d’utiliser <div>, nous utilisons des composants comme <View>. Ces composants spécifiques sont appelés les core components de React Native et ils sont nombreux.
Ainsi, au lieu d’écrire des vues en Swift pour iOS ou en Kotlin/Java pour Android, nous allons utiliser ces composants, et React Native va se charger de faire appel aux composants natifs correspondants sur chaque plateforme.
2. Réutilisation de la logique
Une grande partie de la logique métier et des composants peuvent être partagés entre les applications iOS et Android. Cela réduit le temps et les efforts nécessaires pour développer et maintenir des applications pour différentes plates-formes. C’est d’autant plus vrai si vous avez déjà des compétences fortes en JavaScript et React, car il n’est plus nécessaire d’apprendre à coder en Swift ou en Java.
3. Accès aux fonctionnalités du périphérique
Vous pouvez accéder aux fonctionnalités...
Créer une application avec Expo
Il existe plusieurs moyens de créer une application React Native comme mentionné dans la documentation officielle. Le plus simple est d’utiliser le framework open source Expo.
Expo est un ensemble d’outils et de services qui facilite le développement d’applications React Native. Il offre une approche simplifiée pour démarrer rapidement avec le développement d’applications mobiles sans avoir à configurer les environnements de développement natifs.
Il fusionne le meilleur du mobile et du Web, offrant des fonctionnalités essentielles pour développer ou améliorer une application, y compris des mises à jour en temps réel, le partage instantané de votre application et la prise en charge du Web. Le package npm d’Expo propose une gamme impressionnante de fonctionnalités pour les applications React Native. Il peut être intégré dans presque tous les projets.
1. L’outil create-expo-app
Avant de commencer, assurez-vous d’avoir bien installé Node.js, Git, ainsi que Watchman (uniquement pour Linux ou macOS).
Le meilleur moyen d’installer Watchman, comme indiqué dans la documentation de l’outil, est d’utiliser Homebrew et de taper ces deux commandes : brew update puis brew install watchman.
Pour faciliter la création de projets, il existe...
Mettre en place la navigation
La navigation entre les différentes parties de votre application est essentielle pour offrir une expérience utilisateur fluide. Dans React Native, il existe différentes bibliothèques de navigation qui vous permettent de gérer la navigation entre les écrans. Un exemple est la bibliothèque React Navigation.
1. Installer les dépendances et configurer le projet
L’avantage principal d’Expo est son vaste écosystème. Aussi, pour la navigation, nous pouvons utiliser l’outil fourni qui se nomme Expo Router. Ce dernier requiert l’installation d’un certain nombre de packages :
npx expo install expo-router react-native-safe-area-context
react-native-screens expo-linking expo-constants expo-status-bar
react-native-gesture-handler Ensuite, dans le fichier package.json, il faut modifier la valeur de main comme ceci :
{
"main": "expo-router/entry"
} Enfin, dans le fichier app.json, il faut spécifier le scheme :
{
"scheme": "mon-app-scheme",
} Le scheme fait référence à un schéma d’URI (Uniform Resource Identifier), qui permet d’ouvrir l’application à partir d’une URL. Par exemple, si vous avez une application nommée monapp, vous pourriez définir...
Ajouter du style
Ajouter du style à vos composants est crucial pour créer une expérience utilisateur attrayante et cohérente. Dans React Native, le style est géré à l’aide de feuilles de style qui ressemblent aux feuilles de style CSS.
1. Utilisation de styles en ligne
En React Native, on n’utilise ni class ni classname pour le style, contrairement à React pour le Web. À la place, React Native utilise un système de style basé sur JavaScript qui ressemble un peu au CSS, avec néanmoins des différences notables.
Vous pouvez ajouter des styles directement en ligne dans vos composants à l’aide de l’attribut style. Les propriétés de style sont similaires à celles de CSS, mais avec des noms au format camelCase.
import { View, Text, StyleSheet } from 'react-native';
const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Bonjour, React Native !</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f2f2f2', ...
