Accentsconagua
Share
Dans cette série, vous apprendrez à utiliser React Native pour créer des mises en page couramment utilisées dans les applications mobiles. Les présentations que vous allez créer ne seront pas fonctionnelles. L'objectif principal de cette série est de vous salir les mains lors de la présentation du contenu dans vos applications natives React.
Si vous débutez dans la présentation d'applications React Native ou dans le style en général, consultez mon tutoriel précédent:
Pour suivre cette série, je vous mets au défi d'essayer de recréer chaque écran par vous-même d'abord, avant de lire mes instructions détaillées dans le didacticiel. Vous ne bénéficierez pas vraiment de ce tutoriel simplement en le lisant! Essayez d'abord avant de chercher les réponses ici. Si vous parvenez à ressembler à l'écran d'origine, comparez votre implémentation à la mienne. Ensuite, décidez 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:
La page de connexion est généralement utilisée comme page initiale pour les applications nécessitant un compte utilisateur..
Voici quelques exemples de ce type de mise en page à l'état sauvage:
La première étape consiste bien entendu à mettre en place un nouveau projet React Native:
réact-native init réag-native-common-screen
Une fois le projet configuré, ouvrez le index.android.js fichier et remplacez le code par défaut par ce qui suit:
importer Réagir, Composant de 'réagir'; importer AppRegistry de 'react-native'; importer le login depuis './src/pages/Login'; exporter la classe par défaut ReactNativeCommonScreens étend Component render () return () AppRegistry.registerComponent ('ReactNativeCommonScreens', () => ReactNativeCommonScreens);
Créer un src / pages dossier et créer un Login.js déposer à l'intérieur.
Vous aurez aussi besoin du réagir-native-vector-icons paquet. Ceci est spécifiquement utilisé pour rendre l'icône Facebook pour le bouton de connexion Facebook.
npm install --save react-native-vector-icons
Ouvrez le android / app / build.gradle fichier et ajouter une référence au paquet:
dependencies // le reste des dépendances se trouvent ici dans le projet de compilation supérieur (': react-native-vector-icons') // add thisFaire la même chose avec le android / settings.gradle fichier en ajoutant ce qui suit en bas:
inclure le projet ': react-native-vector-icons' (': react-native-vector-icons'). projectDir = nouveau fichier (rootProject.projectDir, '… / node_modules / react-native-vector-icons / android')Ouvrir android / app / src / main / java / com / react-natif-common-screens / MainApplication.java et importer le package:
importer java.util.Arrays; importer java.util.List; importer com.oblador.vectoricons.VectorIconsPackage; //Ajoute ça
Enfin, initialisez le paquet:
@Override protected ListgetPackages () retourne des tableaux. asList (new MainReactPackage (), new VectorIconsPackage () // ajouter ceci);
Bon, maintenant que vous avez essayé de coder vous-même la mise en page (pas de triche, pas vrai?), Je vais vous montrer comment j'ai construit mon implémentation. Ouvrez le src / pages / Login.js archivez et importez les choses dont vous aurez besoin:
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, View, TextInput, ScrollView de 'react-native'; importer l'icône de 'react-native-vector-icons / FontAwesome';
Mis à part les composants React par défaut et le réagir-native-vector-icons package, vous devez également inclure trois composants personnalisés:
importer un conteneur à partir de '… / components / Container'; bouton d'importation de '… / composants / Bouton'; importer une étiquette à partir de '… / components / Label';
Le premier est le Récipient (src / components / Container.js), dont le travail consiste à ajouter une marge inférieure à tout ce qu’elle recouvre. Cela semble trivial, et oui, vous pouvez réellement utiliser Vue et ajoutez les mêmes styles à chaque fois que vous souhaitez l’utiliser. L’avantage qu’il offre est que vous n’avez pas à appliquer les mêmes styles à un Vue plusieurs fois, et vous permet également de réutiliser le composant chaque fois que vous devez ajouter une marge inférieure à quelque chose.
importer Réagir, Composant de 'réagir'; importer StyleSheet, View de 'react-native'; const Container = (props) => return (props.children ) const styles = StyleSheet.create (labelContainer: marginBottom: 20); conteneur d'exportation par défaut;
le Bouton composant (src / components / Button.js), comme son nom l'indique, est utilisé pour créer des boutons. Si présent, cela crache tout composant enfant qui y est ajouté. Sinon, il génère un Texte composant qui montre le texte à l'intérieur du bouton. Un style par défaut est également ajouté, mais il ne sera pas utilisé si noDefaultStyles est présent dans les accessoires. Les styles de boutons uniques transmis depuis les accessoires sont également facultatifs.
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, TouchableHighlight, de 'react-native'; const Button = (props) => function getContent () if (props.children) return props.children; revenirprops.label revenir (Obtenir du contenu() ) const styles = StyleSheet.create (button: alignItems: 'center', justificationContent: 'center', remplissage: 20,); bouton d'exportation par défaut;
Enfin, il y a le Étiquette composant (src / components / Label.js), qui est fondamentalement juste un Texte composant avec un style prédéfini.
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, de 'react-native'; const Label = (props) => return (props.text ) const styles = StyleSheet.create (textLabel: fontSize: 20, fontWeight: 'bold', fontFamily: 'Verdana', marginBottom: 10, color: '# 595856'); Exporter l'étiquette par défaut;
Vous pouvez maintenant passer à la page de connexion actuelle. À l'intérieur de rendre() méthode, tout envelopper dans un ScrollView composant. Ceci est très important si vous souhaitez que votre application puisse prendre en charge toutes sortes de dimensions de périphériques et d'orientations d'écran..
Le plus souvent, quel que soit le peu de hauteur que votre contenu va consommer, il y aura toujours un appareil qui ne pourra pas l'afficher complètement. Ainsi, la nécessité de barres de défilement pour faire défiler le contenu.
export default class Login Login étend Component render () return (… )
Ensuite, initialisez les styles:
const styles = StyleSheet.create ();
Appliquez les styles suivants à la ScrollView. flexDirection est facultatif, mais il est recommandé de le définir explicitement pour que les futurs développeurs sachent exactement comment le contenu principal de l'application est présenté simplement en jetant un coup d'œil au code..
scroll: backgroundColor: '# E1D7D8', remplissage: 30, flexDirection: 'column',
En regardant la capture d'écran de tout à l'heure, le premier élément de contenu que vous souhaitez ajouter est celui qui se trouve tout en haut, à savoir le bouton Mot de passe oublié. Notez que le onPress les accessoires sont fournis parce que le underlayColor ne sera pas réellement appliqué s'il n'y a pas de fonction fournie lorsque le bouton est enfoncé.
Les styles utilisés pour cela sont assez explicites, sauf pour le alignSelf: 'flex-end'. Cela indique à React Native de positionner l'élément à la toute fin de la ligne en cours.. s'aligner est l'équivalent de alignItems pour spécifier l'alignement de l'élément lui-même et non ses enfants. En utilisant extrémité flexible vous permet d'obtenir un effet similaire à celui de Flotter à droite en CSS.
label: color: '# 0d8898', fontSize: 20, alignRight: alignSelf: 'flex-end',
Suivant sont les deux champs de texte avec leurs étiquettes.
À ce stade, la page devrait maintenant ressembler à ceci:
Voici le style pour le saisie de texte:
textInput: height: 80, fontSize: 30, backgroundColor: '#FFF',
Maintenant, vous avez peut-être commencé à remarquer pourquoi le Récipient composant est important. Il vous permet d'encapsuler les styles par défaut afin que vous ne finissiez pas par les déclarer à nouveau dans chaque fichier. C’est un principe fondamental de React: vous devez toujours vous efforcer de réutiliser les composants chaque fois que vous voyez une opportunité..
Le bouton pour vous connecter à Facebook est un peu différent des boutons que vous avez créés précédemment. Cette fois, il contient un contenu qui affiche une icône avec du texte. Ceux-ci sont ajoutés à la place du étiquette les accessoires afin de personnaliser davantage le contenu du bouton.
Une fois que cela a été ajouté, la page devrait maintenant ressembler à ceci:
Ajoutez les styles pour le bouton de connexion Facebook:
transparentButton: marginTop: 30, borderColor: '# 3B5699', borderWidth: 2, buttonBlueText: fontSize: 20, color: '# 3B5699', buttonBigText: fontSize: 20, fontWeight: 'bold', en ligne: flexDirection: 'row',
Il n'y a vraiment rien à noter ici sauf pour styles.inline, qui est utilisé comme classe d'assistance pour empiler horizontalement tous les éléments à l'intérieur de celle-ci. Ceci produit un effet similaire à celui de l’utilisation de en HTML pour envelopper le texte que vous souhaitez afficher en ligne. En CSS, ceci peut être réalisé en utilisant soit affichage: en ligne ou affichage: bloc en ligne.
Les derniers éléments sur cet écran sont les Se connecter et Annuler boutons. Ils ont besoin de plus d’espace au-dessus d’eux que les autres éléments, il est donc préférable de les envelopper dans un conteneur (bas de page) et appliquer marginTop à cela. Cela a plus de sens que de déclarer un nouveau style uniquement pour ces boutons.
Enfin, ajoutez le style pour le Se connecter et Annuler boutons:
buttonWhiteText: fontSize: 20, color: '#FFF',, buttonBlackText: fontSize: 20, color: '# 595856', primaryButton: backgroundColor: '# 34A853', pied de page: marginTop: 100
Enfin, n'oubliez pas de définir le code qui sera exécuté lorsque vous appuierez sur l'un des boutons.!
press () // exécute n'importe quel code ici
C'est tout! Dans ce tutoriel, vous avez créé avec succès une page de connexion en utilisant vos connaissances Flexbox. En cours de route, vous avez également appris à utiliser une bibliothèque tierce appelée React Native Vector Icons pour ajouter facilement des icônes dans votre application. Comment ma solution s'est-elle comparée à la vôtre? Faites-nous savoir dans le forum de discussion ci-dessous.
Dans le prochain tutoriel 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.
