React-Native

 

# CONTEXTE

Il est impossible de présenter React Native sans faire mentionner React. La première version de cette dernière a été présenté au monde en 2013, et depuis lors, il a connu une croissance impressionnante, tant à l'intérieur qu'à l'extérieur de Facebook, son créateur. Aujourd'hui, même si personne n'est obligé de l'utiliser, de nouveaux projets Web sur Facebook sont généralement construits en utilisant React sous une forme ou une autre, et il est largement adopté dans l'industrie.

React nous oblige à décomposer nos applications en composants, chacun représentant une vue unique. Ces composants facilitent l'itération sur les produits, car il n'est pas nécessaire de garder le schéma entier dans notre tête afin d'apporter des modifications à une partie de celui-ci. Plus important encore, React enveloppe l'API impérative mutative du DOM d'une API déclarative, ce qui augmente le niveau d'abstraction et simplifie le modèle de programmation. Lorsqu'on développe avec React, le code devient plus prévisible.

Avec le cycle d'itération rapide du Web, Facebook a pu créer des produits géniaux avec React, y compris de nombreux composants de Facebook.com. De plus, des frameworks JavaScript étonnants ont pu apparaître suite à React, comme Relay, ce qui permet de simplifier considérablement la collecte de données à grande échelle. Bien sûr, le web n'est qu'une partie de l'histoire, Facebook a également utilisé les applications Android et iOS, qui sont construites sur des piles de technologie propriétaires disjointes. Devoir construire des applications sur plusieurs plates-formes a bifurqué l'organisation de l'ingénierie de Facebook, mais ce n'est qu'une des choses qui rendent le développement d'applications mobiles natives difficile.

 

# INTRODUCTION

React Native est un framework mobile hybride développé par Facebook depuis début 2015. Il continue d'évoluer avec le soutien de nombreux contributeurs sur Github. Facebook a développé l'application de sa dernière Keynote en React Native, qui est un très bon exemple de ce qu'il est possible de faire. Longtemps considéré comme une expérimentation sympathique (après tout, il est né lors d'un hackathon), un cycle de release a soutenu d'une version majeure toutes les deux semaines a fait qu'aujourd'hui l'écosystème est suffisamment riche et stable pour déployer une app iOS et Android en production.

React Native peut se résumer en une phrase : " Créez des applications mobiles natives avec du JavaScript et React ". React Native permet de créer des applications mobiles en utilisant uniquement le JavaScript. Il utilise le même design que React, ce qui permet de composer une interface utilisateur mobile riche à partir de composants déclaratifs.

Le but de React Native est de pouvoir réutiliser le maximum de code entre les différentes plateformes (iOS et Android). Il offre un gain de temps considérable par rapport à du développement spécifique, tout en étant aussi performant.

L'écriture en JavaScript permet aux développeurs web de construire une application mobile native, contrairement à Cordova qui encapsule l'application dans une webview. React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il est compatible avec ES5, ES6 ou ES7.

Avec React Native, point de navigateur embedded, de HTML ou de CSS : vous devez composer vos interfaces à l'aide de composants React qui font appel au layout natif de la plateforme. Un exemple simple : <View> (équivalent d'une <div> HTML) communique via un pot JS <-> Objective-C / Java pour contrôler une UIView (sur iOS) ou une android.view. Les performances de l'UI sont donc similaires aux performances natives.

 

# ENVIRONNEMENT 

react-native-cli est le moyen le plus simple de commencer à créer une nouvelle application React Native. Il vous permet de démarrer un projet sans installer ni configurer d'outils pour générer du code natif.

En supposant que Node (https://nodejs.org/en/download/) et watchman (https://facebook.github.io/watchman/docs/install.html) soient installé, vous pouvez utiliser npm pour installer l'utilitaire de ligne de commande :

npm install -g react-native-cli

react-native init FirstApplication

Une fois le projet initialisé, le CLI vous informe de la façon dont lancer votre application : faites-le dans la foulée. En ce qui me concerne, je développe pour iOS.

react-native run-ios

 

 

Selon votre plateforme cible, ouvrez App.js dans votre éditeur préféré. Modifiez quelque peu le texte et rafraichissez votre app via Command⌘ + R, deux pressions sur la touche R (émulateur Android).

 

# APPLICATION

Nous allons créer une application qui nous affiche des images d’animaux et lorsqu’on clique sur une image, une autre apparaît.

Définissons les images et ajoutons un import pour ImageBackground (le composant pour le rendu des images) et TouchableHighlight (pour rendre l’image cliquable).

 

  1. import React, { Component } from 'react';  
  2. import {  
  3.   AppRegistry,  
  4.   StyleSheet,  
  5.   Text,  
  6.   View,  
  7.   ImageBackground,  
  8.   TouchableHighlight  
  9. } from 'react-native';  
  10.   
  11. const Images = [  
  12.     {  
  13.         uri: "https://i.imgur.com/mxgtWKt.jpg",  
  14.         label: "Cat on a blue blanket"  
  15.     },  
  16.   
  17.     {  
  18.         uri: "https://i.imgur.com/XCRnNWn.jpg",  
  19.         label: "A cat toy"  
  20.     },  
  21.   
  22.     {  
  23.         uri: "https://i.imgur.com/dqQX1K0.jpg",  
  24.         label: "A close up of a dog"  
  25.     },  
  26.   
  27.     {  
  28.         uri: "https://i.imgur.com/nZXbSbh.jpg",  
  29.         label: "Sheep next to a cat"  
  30.     },  
  31.   
  32.     {  
  33.         uri: "https://i.imgur.com/mXCjefR.jpg",  
  34.         label: "Cat laying on the grass"  
  35.     },  
  36.   
  37.     {  
  38.         uri: "https://i.imgur.com/AGyxRcc.jpg",  
  39.         label: "Bird sitting on a railing"  
  40.     }  
  41. ];  

 

Il est nécessaire d’élargir la définition du style par défaut. Il est plus évident de réaliser la partie style avant de développer les composants pour afficher les images.

 

  1. const styles = StyleSheet.create({  
  2.     container: {  
  3.         flex: 1,  
  4.         justifyContent: 'center',  
  5.         alignItems: 'center',  
  6.         backgroundColor: '#abcdef',  
  7.     },  
  8.     image: {  
  9.         flex: 2,  
  10.         width: 320,  
  11.         justifyContent: 'flex-end',  
  12.         alignItems: 'center'  
  13.     },  
  14.     imageLabel: {  
  15.         textAlign: 'center',  
  16.         backgroundColor: 'rgba(100, 100, 100, 0.5)',  
  17.         color: 'white',  
  18.         width: 320  
  19.     },  
  20.     empty: {  
  21.         flex: 1  
  22.     }  
  23. });  

 

STYLE EXPLICATION :  

React Native utilise JavaScript pour définir ses feuilles de style, très ressemblant à du CSS. On peut considérer chaque clé du dictionnaire principal comme une classe CSS et chaque clé enfant comme une propriété CSS.

React Native utilise le camelCase au lieu du dash-case : background-color devient backgroundColor, text-align devient textAlign, ainsi de suite.

Nous avons changé container.backgroundColor, nous allons supprimer le message par défaut et les instructions et ajouter les images et les labels.

React Native utilise flexbox pour mettre en forme l’écran. Nous utilisons flex: 1 et flex: 2 pour spécifier à quel point une priorité doit être atteinte.

 

Le résultat est le suivant :

 

 

En effet, nous avons pu supprimer les instructions et le message par défaut mais nous ne l’avons pas remplacé par les images ni les labels.

Nous avons maintenant le style de l’application et la définition des images. Développons maintenant la méthode pour rendre les images.

C’est comme ça que React rend l’interface utilisateur. Vous construisez des composants avec une méthode de rendu pour chacun. Il définit à quoi ressemble ce composant, et quels éléments enfants il utilise.

Nous utilisons JSX, qui ressemble à du HTML dans du JavaScript. Cela le rend familier et facile à utiliser. Mais ce n’est pas du HTML, c’est du JavaScript dans les coulisses, ce qui le rend efficace et totalement génial à utiliser.

 

  1. export default class FirstApplication extends Component {  
  2.     state = {  
  3.         index: 0,  
  4.     }  
  5.   
  6.     render() {  
  7.         const image = Images[this.state.index];  
  8.   
  9.         return (  
  10.             <View style={styles.container}>  
  11.                 <View style={styles.empty} />  
  12.                 <ImageBackground source={{uri: image.uri}}  
  13.                        style={styles.image}>  
  14.                     <Text style={styles.imageLabel}>{image.label}</Text>  
  15.                 </ImageBackground>  
  16.                 <View style={styles.empty} />  
  17.             </View>  
  18.         );  
  19.     }  
  20. }  

 

Nous obtenons alors le résultat suivant :

 

 

Nous avons vidé toute la méthode de rendu que react-native a initialisé pour nous. Nous avons conservé le composant principal <View>, c’est l’équivalent d’une <div> en HTML.

Nous utilisons alors deux <View> avec le style empty, flex: 1 et une balise <ImageBackground> avec le style image, flex: 2. Cette combinaison centre verticalement notre image et lui donne une hauteur de 50%. Nous avons dû corriger la largeur à 320px car React Native ne comprend pas le dimensionnement à 100%.

À l’intérieur de l’image, nous mettons un élément <Text> qui rend notre légende. Il obtient un fond partiellement gris et le texte en blanc et centré.

Pour obtenir l’url de l’image, nous utilisons une combinaisons de this.state et de la constante Images. State est une chose que React stocke.

 

Le but est maintenant de rendre l’application plus interactive. C’est-à-dire, changer l’image si l’utilisateur a cliqué sur le côté gauche ou le côté droit.

 

  1. export default class FirstApplication extends Component {  
  2.     state = {  
  3.         index: 0,  
  4.         imageWidth: null  
  5.     }  
  6.   
  7.     nextImage(event) {  
  8.         const { index, imageWidth } = this.state,  
  9.               X = event.nativeEvent.locationX,  
  10.               delta = (X < imageWidth/2) ? -1 : +1;  
  11.   
  12.         let newIndex = (index + delta) % Images.length;  
  13.   
  14.         if (newIndex < 0) {  
  15.             newIndex = Images.length - Math.abs(newIndex);  
  16.         }  
  17.   
  18.         this.setState({  
  19.             index: newIndex  
  20.         });  
  21.     }  
  22.   
  23.     onImageLayout(event) {  
  24.         this.setState({  
  25.             imageWidth: event.nativeEvent.layout.width  
  26.         });  
  27.     }  
  28.   
  29.     render() {  
  30.         const image = Images[this.state.index];  
  31.   
  32.         return (  
  33.             <View style={styles.container}>  
  34.                 <View style={styles.empty} />  
  35.                 <TouchableHighlight onPress={this.nextImage.bind(this)}  
  36.                                     style={styles.image}>  
  37.                     <ImageBackground source={{uri: image.uri}}  
  38.                            style={styles.image}  
  39.                            onLayout={this.onImageLayout.bind(this)}>  
  40.                         <Text style={styles.imageLabel}>{image.label}</Text>  
  41.                     </ImageBackground>  
  42.                 </TouchableHighlight>  
  43.                 <View style={styles.empty} />  
  44.             </View>  
  45.         );  
  46.     }  
  47. }  

 

EXPLICATION :

Nous avons rajouté imageWidth à state car React Native ne peut pas détecter la largeur d’un composant à la volée. Vous devez vous branchez sur le moteur de mise en page et enregistrer cette information plus tard.

Nous avons nextImage, c’est un rappel onPress qui se déclenche lorsque l’utilisateur tape sur l’image. Lorsque cela se produit, nous calculons si la presse était à gauche ou à droit du centre, calculons le nouvel index et vérifions qu’il n’atteint pas les images non définies.

Nous utilisons this.setState pour mettre à jour l’index dans le state. Cela déclenche le rendu d’un nouvel index et restitue une nouvelle image.

La fonction onImageLayout nous aide à définir state.imageWidth, c’est une évènement de rappel onLayout pour le composant <ImageBackground>.

 

# ANNEXE 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *