Dans cette série, vous apprendrez à utiliser React Native pour créer des mises en page couramment utilisées dans les applications mobiles. Les mises en page que vous allez créer ne seront pas fonctionnelles. Au lieu de cela, l’objectif principal de cette série est de mettre la main à la pâte dans la mise en page du contenu dans vos applications React Native.

Si vous débutez dans la mise en page des applications React Native ou dans le style en général, consultez notre tutoriel sur les mises en page dans React Native:

Pour suivre cette série, je vous mets au défi d’essayer de recréer chaque écran par vous-même avant de lire mes instructions étape par étape dans le tutoriel. Vous ne bénéficierez pas vraiment de ce tutoriel rien qu’en le lisant! Essayez d’abord avant de rechercher les réponses ici. Si vous réussissez à le faire ressembler à l’écran d’origine, comparez votre implémentation à la mienne. Alors décidez par vous-même lequel est le meilleur!

Dans cette première partie de la série, vous allez créer la page de connexion suivante:

Commencer

Dans ce tutoriel, nous utiliserons l’Expo CLI. Expo est un ensemble d’outils et de services basés sur des plates-formes natives et natives React qui vous aident à développer, créer, déployer et itérer rapidement sur des applications iOS, Android et Web à partir de la même base de code JavaScript ou TypeScript.

Expo est le moyen le plus simple et le plus rapide de créer des applications React Native. La guide de démarrage officiel de l’Expo contient des instructions détaillées sur la façon de télécharger et de configurer Expo CLI pour les principaux systèmes d’exploitation.

Créez un nouveau projet:

expo init LoginLayout

Vous serez invité à choisir le type de projet à initialiser. Choisir Flux de travail géré et Vide. Attendez quelques secondes qu’Expo installe les fichiers du projet et changez le répertoire dans le nouveau projet.

cd LoginLayout

La structure du projet doit ressembler à ceci.

Ouvert App.js pour commencer à travailler sur votre application. Le code de départ App.js devrait ressembler à ceci:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Sur la deuxième ligne de code, nous importons React pour utiliser JSX. Ensuite, nous importons le StyleSheet, Text, et View composants de React Native.

Vient ensuite le App function, qui renvoie un composant de vue et un composant de texte en tant qu’enfant de cela. <View> est un composant essentiel de React Native et peut servir à plusieurs fins, telles que la mise en forme de différents éléments, l’habillage d’éléments ou l’imbrication d’éléments. La <View> element équivaut à <div> dans le développement Web HTML. Comme vous pouvez le voir, le View le composant a une propriété, style = {styles.container}, qui est utilisé pour appliquer des styles à la vue.

La <Text> Le composant nous permet de rendre du texte.

Layouts avec Flexbox

Flexbox est une technique critique dans React Native. Il est conçu pour fournir une mise en page cohérente sur différentes tailles d’écran. Flexbox fonctionne de la même manière dans React Native qu’en CSS sur le Web, à quelques exceptions près. (Vous pouvez en savoir plus sur CSS Flexbox ici.) Les valeurs par défaut sont différentes, cependant, avec la direction flex par défaut colonne au lieu de ligne et le paramètre flex ne prenant en charge qu’un seul nombre.

Flex définit la façon dont les éléments remplissent l’espace disponible le long de l’axe principal. L’espace disponible est divisé en fonction de la propriété flex de chaque élément.

Nous définissons la disposition de la flexbox en bas du fichier dans le styles constant. Le conteneur a les styles suivants:

• flex: 1: Ceci définit comment les éléments rempliront l’espace. L’espace est généralement divisé en fonction de la propriété flex de chaque élément.
• justifyContent: "center": Ceci aligne les enfants d’un conteneur au centre de l’axe principal du conteneur.
• alignItems: "center": Ceci aligne les enfants d’un conteneur au centre de l’axe transversal du conteneur.

Interface utilisateur et composants communs

Un React Native classique utilisera les composants suivants.

Ajouter une image

Les images dans React Native sont placées dans le les atouts dossier et référencé comme ceci:

<Image source={require('.assets//image.png')} />

Ajoutons une image dans le dossier des actifs. Cela sera utilisé comme image du logo. Commencez par supprimer le composant de texte et remplacez-le par l’image du logo. N’oubliez pas d’importer le Image composant en haut.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Image source = {require("./assets/logo.png")}/>
      </View>
    );
  }
}

Styling dans React Native

Les éléments de react Native sont stylisés à l’aide de JavaScript. Tous les éléments React Native acceptent un accessoire nommé style, qui accepte un objet avec des noms et des valeurs de style. Ces noms et valeurs de style sont similaires à ceux utilisés dans CSS, sauf que les noms sont écrits en utilisant un boîtier camel. Par exemple, React Native utilise backgroundColor pour la propriété CSS background-color.

Ajoutez les styles suivants à l’image.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
   },

   image :{
    marginBottom: 40

  }
    
});

Ici, nous ajoutons un marginBottom: 40 style pour faire de l’espace entre l’image et les entrées de texte.

Ensuite, ajoutez des champs de saisie de texte pour l’e-mail et le mot de passe. Tout d’abord, ajoutez des propriétés d’état pour contenir l’e-mail et le mot de passe. L’état dans React Native est utilisé sur les composants qui changent avec le temps. Par exemple, les informations du TextInput ne cesse de changer à mesure que les utilisateurs saisissent leurs informations. L’état initial de l’e-mail et du mot de passe sera vide.

Commencez par importer useState, comme indiqué ci-dessous. La useState function permettra à nos composants fonctionnels d’être avec état.

import React, { useState } from 'react';

Puis initialisez l’état en ajoutant le code suivant dans le App fonction.

export default function App() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
  return (
    // rest of the code
  );
}

Nous utilisons un View pour envelopper chaque entrée de texte pour un style facile. Ajoutez ce code sous l’image.

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="#003f5c"
          onChangeText={(email) => setEmail(email)}
        />
      </View>

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="#003f5c"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>

La setState met à jour l’objet d’état avec les informations que l’utilisateur a entrées. secureTextEntry est défini sur true pour masquer le texte saisi dans la saisie de texte de l’e-mail à des fins de sécurité.

Ajoutez les styles suivants au inputView et textInput accessoires.

 inputView: {
    backgroundColor: "#FFC0CB",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,
    alignItems: "center",
  },

  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  }

Ajouter le Mot de passe oublié? bouton sous les champs de saisie de texte. Nous utiliserons un TouchableOpacity bouton, qui change l’opacité lorsqu’il est enfoncé.

      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>

Ensuite, ajoutez les styles suivants pour le bouton Mot de passe oublié.

  forgot_button: {
    height: 30,
    marginBottom: 30,
  }

Enfin, ajoutez le S’identifier bouton. Ajoutez le code suivant sous le bouton Mot de passe oublié.

      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>

Ajoutez les styles pour le bouton de connexion.

 loginBtn:
  {
    width:"80%",
    borderRadius:25,
    height:50,
    alignItems:"center",
    justifyContent:"center",
    marginTop:40,
    backgroundColor:"#FF1493",
  }

Ici, nous ajoutons un style de rayon de bordure pour rendre le bouton circulaire et un marginTop: 40 propriété pour faire un espace entre les deux boutons. Nous définissons également une hauteur et une largeur personnalisées.

Le code d’écran de connexion final

Le code final pour App.js devrait ressembler à ceci:

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableOpacity,
} from "react-native";

export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./assets/log2.png")} />

      <StatusBar style="auto" />
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="#003f5c"
          onChangeText={(email) => setEmail(email)}
        />
      </View>

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="#003f5c"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>

      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },

  image: {
    marginBottom: 40,
  },

  inputView: {
    backgroundColor: "#FFC0CB",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,

    alignItems: "center",
  },

  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  },

  forgot_button: {
    height: 30,
    marginBottom: 30,
  },

  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "#FF1493",
  },
});

Et voici le look final de l’application:

Conclusion

Dans ce didacticiel, vous avez réussi à créer une belle page de connexion en utilisant vos connaissances Flexbox. Vous avez également appris à utiliser l’Expo CLI, un moyen simple de créer et de tester React Native Apps.

Dans le prochain didacticiel de cette série, vous apprendrez à créer un écran de calendrier. En attendant, consultez certains de nos autres tutoriels sur React Native et Flexbox.

• 

  Premiers pas avec les mises en page natives React

  Dans ce didacticiel, vous apprendrez à mettre en page les applications React Native et à implémenter les dispositions couramment utilisées dans les applications.
• 

  Créez une application sociale avec React Native

  React Native, créé par Facebook, vous permet d’écrire des applications mobiles natives en JavaScript moderne. Les applications React Native seront transformées en vues natives spécifiques …
• 

  Animez votre application native React

  Les animations peuvent donner vie à votre application et rendre vos interfaces utilisateur plus intuitives. Dans ce didacticiel, vous apprendrez à implémenter différents types d’animations dans …
• 

  21+ meilleurs modèles d’applications natives React de 2021 (dont 5 gratuits)

  Il existe de nombreux modèles d’applications React Native parmi lesquels choisir en ligne. Dans cet article, je vais vous expliquer quelques-uns des meilleurs modèles d’applications React Native disponibles.