Comment créer le premier projet dans React native

React est l’une des bibliothèques JavaScript les plus populaires aujourd’hui, pour de bonnes raisons. Avec le soutien de géants comme Facebook, cet effort est destiné à aller plus loin, malgré les doutes initiaux. L’utilisation de React a fortement augmenté au fil du temps et React Native est sa prochaine itération. React Native est conçu pour permettre aux développeurs de créer des applications React qui fonctionnent localement sur les appareils iOS et Android. Dans cet article, je vais vous montrer quelques notions de base sur REACT et comment commencer la structuration et la modélisation dans React Native. Il n’y a pas d’autres conditions préalables que les compétences de base en javascript, HTML et React. Il est utile de comprendre ce qu’est une fermeture et comment elle fonctionne en javascript, mais vous apprendrez quoi que soit React Native.
Ensuite, réchauffez vos doigts, préparez votre clavier et commencez ce voyage amusant! Pour toute personne qui n’est pas familière avec React native, la documentation contient une très bonne page d’introduction qui peut vous aider à commencer à utiliser React. Maintenant, nous créons un projet React de base en utilisant l’application create React Native (la page d’introduction officielle pour configurer React Native sur votre site). Une fois les étapes d’installation terminées avec succès, consultez le répertoire des projets: Un avantage de React Native est que vous pouvez écrire des applications Android et IOS, et la plupart du code JavaScript qu’ils partagent. Dans le dossier nouvellement créé, vous trouverez deux fichiers: \
Parce que nous construisons une application IOS, nous avons supprimé le fichier \
L’interface graphique exécute le projet dans l’émulateur xcode. Rapidement Votre émulateur iPhone est maintenant en marche et votre application React Native est verrouillée et chargée! Une fois terminé, vous devriez voir la sortie suivante dans le simulateur: Dans ce tutoriel, j’utilise l’émulateur iPhone 6, et voici une capture d’écran de l’écran d’accueil de l’application. Vous pouvez maintenant ouvrir index.ios.js dans l’IDE pour l’édition de texte et observer ses changements immédiatement. Nous avons terminé la première partie. Le modèle solide du tutoriel final: C’est le résultat idéal des vues que nous voulons créer avec ce tutoriel. Ce modèle solide peut être réalisé en suivant les étapes suivantes: Étape 1: diviser la page en conteneurs vous recommande une représentation visuelle approximative du contenu à construire. React construit autour du conteneur; Tout ce que vous voyez sur la page fait partie du conteneur. Il est préférable d’analyser le modèle avant de commencer à écrire le Code.
À partir de l’image ci – dessus, nous pouvons dessiner le conteneur de démonstration: le conteneur d’écran accède au logo du conteneur courriel mot de passe enregistrer le bouton conteneur ici, nous avons également besoin d’une méthode _ userlogin qui envoie la demande à \/ session \/ créer avec votre nom d’utilisateur et mot de passe. Les composants sont le noyau et l’âme de React Native et ont une exigence: ils doivent implémenter le rendu, une fonction qui indique au composant ce qu’il doit rendre. (honnêtement, je ne peux pas trouver un autre mot.: d) changez la méthode de rendu dans le fichier index. Système d’exploitation inter – réseau. JS (pour les utilisateurs d’IOS) et ajouter la section analyse en conséquence.
Ajoutez une classe de style à chaque section comme suit:
La première chose que nous devons faire avant de commencer à construire la méthode render est d’ajouter un constructeur. Dans le constructeur, nous initialisons la variable d’état. Étape 2: initial
Définir l’état dans le constructeur {dans la classe du composant constructeur (props)
Super (accessoires);
Celui – là. État = {
};
}
Ajouter la méthode _ onpressbutton à onpressbutton () {constructeur
Console. Log (‘appuyez sur login’);
}
Nous construirons le module de connexion en utilisant textinputs et touchablehighlights, un composant bouton – poussoir qui convertit un seul élément enfant en élément cliquable. La structure de la fonction de rendu doit être la suivante: Assurez – vous que tous les composants utilisés dans le rendu sont importés de la bibliothèque locale React en haut du fichier. Dans ce cas, j’utilise les composants suivants de la Bibliothèque de vue de texte pour entrer du texte touchablehighlight pour importer ces modules comme suit: ajouter ce qui suit en haut de la page d’index
Importer React à partir de React, {Component};
Import {
Appregistry, \/ \/ Register Application
Feuilles de style, \/ \/ composants de la Feuille de style pour l’application
Texte
Saisie de texte,
Touchablehighlight,
} de \
Viewstype = {styles.yoursectionclassname} ajoutera tous les styles personnalisés au composant. Par défaut, vous trouverez un style constant dans le fichier index. Const styles = feuille de style. Créer
Je…
});
Lorsque vous définissez un style de section, assurez – vous d’ajouter une bordure à chaque section afin que vous puissiez contrôler la hauteur, la largeur et l’emplacement de chaque section et comment elle s’affiche dans le simulateur.
Yoursectionclassname: {
Largeur du bord: 1,
Bordercolor: \
Vos autres styles
Je…
}
Voici une capture d’écran surlignée de toutes les parties de l’écran avec des bordures: Une fois la forme de la section terminée, nous pouvons supprimer les bords inutiles. Voici le style final des composants de l’écran de connexion:
Un et le style, l’image ci – dessous est la sortie finale: Voici le Code final du composant Access: félicitations, vous venez de terminer votre premier projet React Native!
Ce n’est qu’une simple démonstration de la façon de construire et de façonner un écran dans le moteur de développement d’applications natives React. Avec un peu de traitement, nous pouvons voir comment React Native permet aux développeurs de créer des applications qui fonctionnent presque de la même façon sur les appareils Android et IOS. Si vous combinez cela avec React pour le développement web, vous aurez une suite multiplateforme très compétitive qui aspire à changer le monde. Vous aimez notre tutoriel sur React Native? Veuillez nous le dire dans la section commentaires ci – dessous!