Fermer

janvier 22, 2019

Créez des applications Web conviviales pour les appareils mobiles avec React Native Web


Créer une application multiplate-forme est encore plus facile avec React Native Web, qui nous permet de créer et de déployer à la fois sur le Web et les plateformes mobiles.

Au fil des ans, la création d'applications Web conviviales pour les mobiles est devenue plus facile. l'avènement des requêtes de médias et l'introduction des travailleurs de service. À l'aide de requêtes multimédia, nous pourrions faire en sorte que les applications Web prennent différentes formes lorsqu'elles sont visualisées sur des appareils mobiles. Les employés de service, avec leurs puissantes fonctionnalités, présentent des applications Web puissantes que seules les applications natives sont connues pour: notifications push, synchronisation en arrière-plan, etc.

React Native est une solution multiplateforme développée par Facebook qui vous permet de créer des applications mobiles. en utilisant JavaScript. Ces applications mobiles sont considérées comme multi-plateformes car elles sont écrites une seule fois et déployées sur de nombreuses plateformes, telles que Android, iOS et le Web. Nous verrons aujourd’hui comment utiliser cette puissante technologie pour créer sur le Web des applications orientées plates-formes.

Nous allons créer une application simple qui affiche les informations des utilisateurs à partir d’une API aléatoire utilisant des composants React Native, tels que ScrollView, Text. et Image.

Conditions préalables

Pour suivre ce didacticiel, vous devez avoir installé le nœud Node > 6.0. Vous aurez également besoin d’un gestionnaire de package NPM (livré avec Node) ou de Yarn (suivez le guide d’installation ici ).

Des connaissances de base de JavaScript et de React sont également requises. Vous pouvez suivre le didacticiel officiel de React ici pour vous familiariser avec React.

Mise en route

Avant de commencer, nous devons d'abord configurer le projet et installer ses dépendances. Nous allons utiliser l'application Create React pour amorcer notre application. Nous utilisons Create React App car il peut être configuré pour alias React Native. Nous installerons des polyfills pour certaines des dernières API JavaScript telles que Promise Array.from etc., car le transpiler ne les fournit pas.

application utilisant Create React App, exécutez la commande suivante:

     yarn create react-app random-people
ou
    npx create-react-app random-people

Exécutez la commande suivante pour installer les dépendances de développement du projet:

     yarn add --dev babel-plugin-module-resolver babel-plugin-transform-object-rest-spread étalé babel-plugin-transform-react-jsx- source babel-preset-expo
ou
     npm   installer  --save-dev babel-plugin-module-résolver babel-plugin-transformation-objet-reste-propagation babel-plugin-transformation-réagir-jsx-source babel-preset-expo

Le babel-plugin-module-resolver est un plugin qui résout les modules de votre projet lors de la compilation avec Babel. Nous allons utiliser ce paquet pour alias react-native à react-native-web lors de la configuration du projet.

Pour construire et exécuter notre application, nous allons utiliser Expo. Expo est une chaîne d'outils open-source construite autour de React Native pour la création d'applications Android et iOS. Il permet d’accéder aux fonctionnalités du système telles que Appareil photo, Stockage, etc.

Installez expo-cli en exécutant la commande suivante:

     yarn global add expo-cli
            ou
     npm  i g expo-cli

L'étape suivante consiste à installer expo localement, aux côtés de React Native et de React Native Web. Exécutez la commande ci-dessous pour installer les packages:

     yarn add expo réact-native réact-native-web react-art
            ou
     npm  i expo réagit-natif réagit-natif-web réagit-art

Après avoir téléchargé les packages nécessaires à l'exécution et à la création de l'application, l'étape suivante consiste à configurer les fichiers de configuration. Créez un fichier appelé .babelrc à la racine de votre projet et mettez-le à jour avec le texte suivant:

     //. Babelrc {
       "presets" :   [ "babel-preset-expo" ] 
       "env" :   {
         "développement" :   {
           "plugins" "[[19659024]:   [ "transform-object-rest-spread"   "transform-react-jsx-source" ] 
        } 
      }  , 
       "plugins" :   [
         [
           "module-resolver" 
           {
             "alias" :   {[19659055] "^ react-native $" :   "react-native-web" 
            } 
          } 
        ] 
      ] 
    }

Créez un fichier nommé app.json . Ce fichier est utilisé pour configurer des parties de votre application qui n'appartiennent pas au code tel que l'application nom description sdkVersion etc. Vous pouvez trouver les options disponibles pour le fichier app.json ici .

Mettons à jour le fichier package.json pour inclure les commandes d'exécution de notre application sous Android et iOS. émulateurs. Nous allons également inclure le champ principal faisant référence au fichier App.js . Ce fichier servira de fichier d'entrée pour l'expo-cli. Ouvrez le fichier package.json dans un éditeur de fichier de choix:

     // package.json 
     {
       "name" :   "random-people" [19659024]
       "version" :   "0.1.0" 
       "privé" :   vrai 
       "principal" [19659024]:   "./ App.js" 
       ... 
       "scripts" :   {
         "start-web" : [19659040] "react-scripts start" 
         "construction-web" :   "react-scripts build" 
         "test-web" : [19659040] "test de réact-scripts" 
         "eject-web" :   "réactif de scripts" (19659024), 
         "start-native"  : [19659040] "expo start" 
         "android" :   "expo android" 
         "ios" :   "expo ios"  ]
         "build: ios" :   "expo build: ios" 
         "build: android" :   "ex po build: android "
      } 
       ... 
    }

Exécutez npm lancez start-web pour exécuter l'application et visitez http: // localhost: 3000 pour afficher l'application.

Home Component

Notre application est une démonstration simple qui affiche les utilisateurs. via l'utilisateur aléatoire API . À l’aide de l’API, un nom et un avatar des utilisateurs renvoyés sont affichés à travers certains des composants fournis par React Native. Dans le répertoire src / créez un fichier nommé home.js . Ouvrez ce fichier à l'aide d'un éditeur et mettez-le à jour avec l'extrait de code ci-dessous:

     // home.js
    importer Réagir de "réagir";
    importer {
      ScrollView,
      ActivityIndicator,
      Feuille de style
    } de "react-native";
    
    la classe Home s'étend React.Component {
      state = {
        utilisateurs: [],
        chargement: vrai
      };
      composantDidMount () {
        // TODO: obtenir les utilisateurs
      }
    
      render () {
        revenir (
          
           
          
        );
      }
    }
    
    var styles = StyleSheet.create ({
      récipient: {
        backgroundColor: "whitesmoke"
      },
      centrage: {
        alignItems: "center",
        justifierContent: "center",
        rembourrage: 8,
        hauteur: '100vh'
      },
    });
    
    défaut d'exportation Home;

Dans l'extrait ci-dessus, le composant Home rend un composant [ScrollView] (https://facebook.github.io/react-native/docs/scrollview) contenant les éléments du composant. . Actuellement, le composant affiche un [ActivityIndicator] (https://facebook.github.io/react-native/docs/activityindicator#docsNav) ; elle sera remplacée par la liste d'utilisateurs une fois l'appel de l'API terminé.

Nous créons des styles pour les éléments à l'aide du composant StyleSheet . Cela nous permet de styliser le composant en utilisant des propriétés similaires aux propriétés CSS.

Créons une méthode qui récupère des utilisateurs aléatoires à partir de l'API d'utilisateur aléatoire. Cette méthode sera appelée au cours du cycle de vie composantDidMount . Mettez à jour le composant home.js pour y inclure la méthode getUsers :

     // home.js
    importer Réagir de 'réagir';
    ...
    
    la classe Home s'étend React.Component {
      state = {
        ...
      };
      composantDidMount () {
        this.getUsers ();
      }
    
      async getUsers () {
        const res = wait fetch ("https://randomuser.me/api/?results=20");
        const {résultats} = wait res.json ();
        this.setState ({utilisateurs: [...results]chargement: false});
      }
      ...
    }

Nous pouvons facilement faire des demandes en utilisant l'API Fetch native. Les résultats de la requête sont analysés et ajoutés à state. Lorsque la demande est terminée, nous cachons l'ActivityIncidator en définissant loading sur false.

Composant d'application

L'application d'AppComponent contient la logique correspondante. L'application. Nous allons mettre à jour la vue par défaut créée par Create React App afin de l'adapter à celle de notre application en ajoutant une logique d'affichage des composants natifs.

Créez un nouveau fichier nommé App.js à la racine de votre projet. Ce fichier sera similaire au fichier src / App.js . Le fichier racine App.js servira de fichier d'entrée pour expo et le fichier src / App.js existe pour les versions Create React App. Mettez à jour les deux fichiers avec l'extrait ci-dessous:

      import  Réagissez  dans   'react' ; 
     import   {
      AppRegistry 
      Feuille de style 
      View 
    }   de   'react-native' ; 
     import  Page d'accueil  de   './ maison' 
    
     classe 
    
     de classe [19659154] L'app.   s'étend  . React .  Composant   {
       Rendu  ()   {
         retour   (
           < Style de la vue  =  { styles .  appConteneur } > 
             < Accueil  / . 
           < /  Voir > 
        ) ; 
      } 
    } 
    
     const  styles  =  StyleSheet  ].  créer  ( {
      appContainer :   {
        flex :   1 
      } 
    } ) ; 
    
    AppRegistry .  registerComponent  ( 'App'   ()   =>  App ) ; 
    
     ] export   default  App ;

Dans l'extrait ci-dessus, nous enregistrons notre composant App à l'aide de AppRegistry. Le AppRegistry est le point d'entrée des applications React Native.

Création d'un élément utilisateur

Chaque élément utilisateur est affiché à l'aide d'un composant View . Le composant View est un bloc de construction important qui prend en charge la présentation à l'aide de la flexbox, du style et de l'accessibilité. Le composant Affichage de chaque élément sera dans une liste balayable. Chaque élément affichera l’avatar, le nom et l’adresse électronique de l’utilisateur. Créez un fichier appelé user-item.js dans le dossier src / et mettez-le à jour avec le code ci-dessous:

  // user-item.js 
 . Import  Réagissez  sur   "réagissez" ; 
  import   { Voir  Image  Texte  ] Feuille de style }   de   "react-native" ; 
  const   UserItem   =   [ { point
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link