Accentsconagua
Share
Bienvenue dans cette série, dans laquelle 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 créez ne seront pas fonctionnelles. L'objectif principal de cette série est de vous salir les mains lors de la mise en page du contenu de vos applications React Native..
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 ce dernier tutoriel de la série, vous allez créer la page de flux d'actualités suivante:
Les présentations de fil d'actualité sont utilisées pour présenter les informations de manière à ce qu'elles puissent être facilement analysées. La plupart du temps, il est présenté sous forme de liste avec le titre, l'extrait et éventuellement une image d'aperçu représentant chaque nouvelle..
Voici quelques exemples de ce type de mise en page utilisé à 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 des nouvelles de './src/pages/News'; 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 News.js déposer à l'intérieur.
Vous aurez aussi besoin du réagir-native-vector-icons paquet. Ceci est spécifiquement utilisé pour l'icône de retour dans l'en-tête.
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..
Vous devez avoir remarqué la tendance maintenant. Je les ai classés par difficulté, ou du moins par difficulté. Donc, cet écran final est fondamentalement le grand patron parmi les autres écrans que vous avez créés jusqu'à présent. Ne vous inquiétez pas, car je vous guiderai toujours pas à pas..
Vous aurez besoin de quelques images pour l'aperçu de chaque article. J'ai ajouté quelques images dans le référentiel que vous pouvez utiliser si vous le souhaitez..
Commencez par ajouter le code passe-partout:
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, View, ScrollView, Image de 'react-native'; importer l'icône de 'react-native-vector-icons / FontAwesome'; bouton d'importation de '… / composants / Bouton'; importer NewsItem de '… / components / NewsItem';
Cette fois, il y a un nouveau composant nommé NewsItem (src / components / NewsItem). Comme son nom l'indique, il est utilisé pour rendre chaque article d'actualité. Nous y reviendrons plus tard, mais jetons d'abord un coup d'œil au constructeur() une fonction. Tout comme l'écran de la galerie précédemment, cela utilise l'état pour stocker la source de données pour les nouvelles. Les titres et les résumés proviennent du New York Times, mais les images proviennent de Google Images (et sont étiquetées pour être réutilisées par leurs propriétaires respectifs)..
constructeur (accessoires) super (accessoires); this.state = news_items: [prétexte: "Matière grise", titre: "L'art vous rend intelligent", résumé: "Les visites de musées augmentent les scores aux tests, génèrent une responsabilité sociale et augmentent l'appréciation des arts par les étudiants.", image: require ('… /images/pink.jpg'),, prétexte: ", titre:" Tensions et défauts avant le crash du site Web pour la santé ", résumé:" Les entretiens et les documents offrent de nouveaux détails sur la manière dont le déploiement du président Obama " programme de signature s transformé en une humiliation majeure. ', image: require ('… /images/beach.jpg '), prétexte: ", titre:" 36 heures à Charleston, SC ", résumé:" Les foules sont plus minces et Les températures sont clémentes en hiver dans cette… ', image: require ('… /images/rails.jpg '),]; Le contenu est divisé en trois parties: l'en-tête, le texte de l'instruction et les nouvelles. L'en-tête est très similaire à l'en-tête de l'écran du calendrier précédent; la seule différence est qu'au lieu de trois, il n'y a que deux éléments visibles. (Si vous souhaitez un rappel sur la manière dont l'écran du calendrier a été créé, continuez et relisez ce tutoriel.)
Je dis "visible" car il y a en fait trois éléments - le dernier est juste caché! Cela permet de centrer facilement le texte au milieu. Si vous n'avez que deux éléments dans l'en-tête, il est difficile de comprendre comment diviser l'espace entre les deux éléments tout en maintenant celui du milieu centré. Mais si vous avez trois éléments, chacun peut avoir le même fléchir valeur, et vous pouvez simplement utiliser textAlign pour positionner du texte ou alignItems positionner Vue Composants.
render () return () La plupart des e-mailés SWIPE À TRAVERS LES SECTIONS this.renderNews ()
le renderNews () fonction est celle qui parcourt tous les articles d’actualité de l’état et les rend en utilisant le NewsItem composant.
renderNews () return this.state.news_items.map ((news, index) => return);
La prochaine étape est le code pour le NewsItem composant. Commencez par ajouter le code du composant Reaplic de boilerplate. Comme vous l'avez vu précédemment, ce composant accepte la clé, indice, et nouvelles comme ses accessoires. Vous avez seulement besoin du indice et nouvelles. clé C’est juste la façon dont React Native identifie de manière unique chaque ligne d’une liste. Vous devez le fournir chaque fois que vous utilisez Array.map pour le rendu; sinon, il va se plaindre.
Lorsque vous utilisez des composants fonctionnels, les accessoires sont transmis sous forme d'argument unique. Ci-dessous, les accessoires individuels sont extraits à l'aide d'une affectation de déstructuration, afin news, index extrait essentiellement le nouvelles et indice propriétés des accessoires. De là, vous pouvez obtenir le nombre à restituer.
importer Réagir, Composant de 'réagir'; importer StyleSheet, Text, View, Image de 'react-native'; bouton d'importation de './Button'; const NewsItem = (news, index) => let nombre = (index + 1) .toString (); revenir (… );
Si vous regardez la capture d'écran précédente, vous pouvez voir que chaque nouvelle peut être divisée en deux groupes: un qui affiche le texte de la nouvelle (numéro, titre et extrait) et un qui affiche l'image principale..
Cela résout le problème de l’image caractéristique car ce n’est qu’un élément. Mais pour le texte d'actualité, vous devez encore le diviser davantage. Comme vous l'avez peut-être remarqué, le numéro se trouve dans la même position, même si le titre a un prétexte (par exemple, "Matière grise"). Le prétexte a également un style différent du titre et du numéro.
En utilisant ces connaissances, vous pouvez en déduire que le nombre, le prétexte et le titre ne doivent pas être regroupés dans un même conteneur. En outre, le prétexte, le titre et l’extrait donnent l’impression qu’ils sont empilés verticalement pour que vous puissiez les placer dans un seul conteneur. Seul le nombre doit être mis en évidence. Avec cela, vous arriverez avec le balisage suivant:
le getPretext () fonction vous permet de rendre conditionnellement un Texte composant uniquement lorsqu'un article a un prétexte.
fonction getPretext (news) if (news.pretext) return (news.pretext )
Ici se trouve le onPress une fonction. Tout ce qu'il fait, c'est alerter le titre de l'actualité, mais dans une application réelle, vous devez accéder à l'article:
fonction onPress (news) alert (news.title);
À ce stade, la page ressemblera à ceci:
Maintenant, ajoutez les styles suivants à la page Actualités:
const styles = StyleSheet.create (conteneur: flex: 1, en-tête: flexDirection: 'rangée', couleur d'arrière-plan: '#FFF', remplissage: 20, justificationContenu: 'espace-entre', borderBottomColor: '# E1E1E1' , borderBottomWidth: 1, header_button: flex: 1,, espaces: flex: 1, back_button: flexDirection: 'rangée', alignItems: 'center', libellé de back_button: color: '# 397CA9', fontSize : 20,, instruction: alignSelf: 'center', marginTop: 5, instruction_text: color: '# A3A3A3', header_text: flex: 1, alignSelf: 'center', header_text_label: fontSize: 20 , textAlign: 'center', news_container: flex: 1, flexDirection: 'column',);
Je ne vous expliquerai plus ce que fait chaque ligne de code, car elle applique les mêmes concepts que ceux que vous avez appris dans les tutoriels précédents de cette série. Voici à quoi ressemblera la page une fois les styles ci-dessus appliqués:
Ensuite, ajoutez les styles pour chaque nouvelle. Chaque news_item a un flexDirection de rangée afin que le texte d'actualités et l'image sélectionnée soient tous sur une seule ligne. news_text occupe les deux tiers de l’espace disponible, tandis que news_photo occupe l'espace restant.
const styles = StyleSheet.create (news_item: flex: 1, flexDirection: 'row', paddingRight: 20, paddingLeft: 20, paddingTop: 30, paddingBottom: 30, borderBottomWidth: 1, borderBottomColor: '# E4E4E4', news_text : flex: 2, flexDirection: 'row', padding: 10,);
Ensuite, vous devez ajouter le style pour résoudre le problème du chevauchement du texte avec l’image d’aperçu. Vous pouvez le faire en assignant un fléchir valeur pour les enfants du news_text. UNE fléchir la valeur a déjà été attribuée à news_text, mais depuis Vue a été utilisé à l'intérieur, vous devez également attribuer un fléchir valeur à ceux afin qu'ils ne vont pas sur les limites de leur parent Vue.
Nous attribuerons une valeur de flex de 0.5 au nombre, tandis que text_container aura une valeur de 3. Avec ces valeurs, le text_container occupera six fois plus d'espace que le nombre.
nombre: flex: 0.5,, text_container: flex: 3,
Il ne vous reste plus qu'à ajouter les touches finales pour styliser le texte:
prétexte: color: '# 3F3F3F', fontSize: 20, titre: fontSize: 28, fontWeight: 'bold', couleur: '# 000', fontFamily: 'georgia', news_photo: flex: 1, justification : 'center', alignItems: 'center', photo: width: 120, height: 120
Et n'oubliez pas d'exporter le composant!
export default NewsItem;
C'est tout! Dans cette dernière partie de cette série, vous avez appris à mettre en œuvre la mise en page couramment utilisée dans les pages d’information. Ce tutoriel a rassemblé toutes les choses que vous avez apprises dans les parties précédentes de la série. Vous avez utilisé les deux flexDirection: 'ligne' et flexDirection: 'colonne' pour compléter les styles pour chaque nouvelle. Vous avez également utilisé vos connaissances pour aligner des images sur l'aperçu..
Si vous avez essayé d'implémenter vous-même ces mises en page, échoué, puis de nouveau essayé, vous devriez déjà avoir suffisamment de compétences pour implémenter tout type de mise en page. Vous pouvez appliquer ce que vous avez appris ici pour mettre en œuvre même les dispositions complexes que vous voyez couramment dans les applications populaires. Si vous voulez plus de pratique, essayez de recréer les mises en page que vous voyez dans les applications populaires telles que Facebook ou YouTube..
Comment ma solution s'est-elle comparée à la vôtre? Faites-nous savoir dans le forum de discussion ci-dessous. Et en attendant, consultez certains de nos autres tutoriels sur React Native et Flexbox.
