Présentations d’applications natives React courantes: fil d’actualité

Bienvenue à nouveau dans cette série, dans laquelle vous apprenez à 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. 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 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 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 ce dernier didacticiel de la série, vous allez créer la page de fil d’actualité suivante:

page de fil d'actualité

Les mises en page de fil d’actualité sont utilisées pour présenter les informations de manière à ce qu’elles puissent être facilement numérisées. La plupart du temps, il est présenté sous forme de liste avec le titre, un extrait et éventuellement une image d’aperçu qui représente chaque actualité.

Voici quelques exemples de ce type de mise en page utilisé dans la nature:

mise en page de nouvelles hacker application de nouvelles
mise en page des actualités Application moyenne

Configuration du projet

La première étape, bien sûr, est de mettre en place un nouveau projet React Native:

Une fois le projet configuré, ouvrez le index.android.js et remplacez le code par défaut par ce qui suit:

Créer un src/pages dossier et créez un News.js fichier à l’intérieur.

Vous aurez également besoin du react-native-vector-icons paquet. Ceci est spécifiquement utilisé pour l’icône de retour dans l’en-tête.

Ouvrez le android/app/build.gradle fichier et ajoutez une référence au package:

Faites de même avec le android/settings.gradle fichier en ajoutant ce qui suit en bas:

Ouvert android/app/src/main/java/com/react-native-common-screens/MainApplication.java et importez le package:

Enfin, initialisez le package:

Création de la page d’actualités

D’accord, maintenant que vous avez essayé de coder la mise en page vous-même (pas de triche, non?) Je vais vous montrer comment j’ai construit mon implémentation.

Vous devez avoir remarqué la tendance maintenant. Je les ai arrangés selon la difficulté – ou du moins selon ce que j’ai trouvé difficile! 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, cependant, car je vous guiderai toujours étape par étape.

Vous aurez besoin de quelques images pour l’aperçu de chaque actualité. J’en ai ajouté images dans le repo que vous pouvez utiliser si vous le souhaitez.

Commencez par ajouter le code passe-partout:

Cette fois, il y a un nouveau composant nommé NewsItem (src/components/NewsItem). Comme son nom l’indique, il est utilisé pour rendre chaque actualité. Nous y reviendrons plus tard, mais jetez d’abord un coup d’œil à la constructor() fonction. Tout comme l’écran de la galerie précédemment, cela utilise l’état pour stocker la source de données pour les actualités. Les titres et 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).

Le contenu est divisé en trois parties: l’en-tête, le texte d’instructions et les actualités. L’en-tête est très similaire à l’en-tête de l’écran du calendrier antérieur; la seule différence est qu’au lieu de trois, il n’y a que deux éléments visibles. (Si vous voulez un rappel sur la façon dont l’écran du calendrier a été créé, continuez et lisez ce didacticiel.)

En relation :  Comment augmenter vos téléchargements d'applications avec des bandes-annonces vidéo

Je dis «visible» parce qu’il y a en fait trois éléments – le dernier est simplement caché! Cela permet un centrage facile du 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 et faire en sorte que celui du milieu apparaisse toujours centré. Mais si vous avez trois éléments, chacun peut avoir le même flex valeur, et vous pouvez simplement utiliser textAlign pour positionner du texte ou alignItems positionner View Composants.

le renderNews() est celle qui parcourt toutes les actualités de l’état et les rend en utilisant le NewsItem composant.

Ensuite vient le code pour le NewsItem composant. Commencez par ajouter le code standard du composant React. Comme vous l’avez vu précédemment, ce composant accepte le key, index, et news comme ses accessoires. Vous avez seulement vraiment besoin du index et news. key est simplement la manière dont React Native identifie de manière unique chaque ligne d’une liste. Vous devez le fournir à chaque utilisation Array.map pour le rendu; sinon, il se plaindra.

Lorsque vous utilisez des composants fonctionnels, les accessoires sont passés sous la forme d’un seul argument. Ci-dessous, les accessoires individuels sont extraits à l’aide de affectation de déstructuration, donc { news, index } extrait essentiellement le news et index propriétés des accessoires. De là, vous pouvez obtenir le nombre à rendre.

Si vous regardez la capture d’écran précédente, vous pouvez voir que chaque actualité peut être divisée en deux groupes: un qui affiche le texte de l’actualité (numéro, titre et extrait), et un qui affiche l’image de la vedette.

Cela résout le problème de l’image principale car il ne s’agit que d’un élément. Mais pour le texte d’actualité, vous devez encore le diviser. Comme vous l’avez peut-être remarqué, le numéro est dans la même position même si le titre a un prétexte (par exemple “Grey Matter”). 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 numéro, le prétexte et le titre ne doivent pas être regroupés dans un seul conteneur. De plus, le prétexte, le titre et l’extrait semblent empilés verticalement afin que vous puissiez les placer dans un seul conteneur. Seul le numéro doit être révélé. Avec cela, vous arriverez avec le balisage suivant:

le getPretext() fonction vous permet de rendre conditionnellement un Text composant uniquement lorsqu’un élément d’actualité contient un prétexte.

Voici le onPress fonction. Tout ce qu’il fait, c’est alerter le titre de l’actualité, mais dans une vraie application, cela devrait accéder à l’article réel:

À ce stade, la page ressemblera maintenant à ceci:

apparence initiale de la page d'actualités

Maintenant, ajoutez les styles suivants à la page Actualités:

Je ne vais plus vous expliquer ce que fait chaque ligne de code car elle applique fondamentalement les mêmes concepts que vous avez appris dans les didacticiels précédents de cette série. Voici à quoi ressemblera la page une fois les styles ci-dessus appliqués:

En relation :  Facebook pour apporter des discussions de groupe connexes à votre fil d'actualité
Styles de page d'actualités appliqués

Ensuite, ajoutez les styles pour chaque actualité. Chaque news_item a un flexDirection de row afin que le texte de l’actualité et l’image en vedette soient tous sur une seule ligne. news_text occupe les deux tiers de l’espace disponible, tandis que news_photo occupe l’espace restant.

Texte de la page d'actualités et image d'aperçu alignés

Ensuite, vous devez ajouter le style pour résoudre le problème de chevauchement du texte avec l’image d’aperçu. Vous pouvez le faire en attribuant un flex valeur aux enfants de la news_text. UNE flex la valeur a déjà été attribuée à news_text, mais depuis un View a été utilisé à l’intérieur, vous devez également attribuer un flex valeur à ceux-ci afin qu’ils ne dépassent pas les limites de leur parent View.

Nous attribuerons une valeur flex de 0.5 à la number, tandis que text_container aura une valeur de 3. Avec ces valeurs, le text_container occupera six fois plus d’espace que le number.

La page d'actualités a ajouté des styles d'alignement du texte

Il ne vous reste plus qu’à ajouter la touche finale pour styliser le texte:

Et n’oubliez pas d’exporter le composant!

Dernières pensées

C’est ça! Dans cette dernière partie de cette série, vous avez appris à implémenter la mise en page couramment utilisée dans les pages d’actualités. 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: 'row' et flexDirection: 'column' pour compléter les styles de chaque actualité. Vous avez également utilisé vos connaissances pour aligner les images pour l’image d’aperçu.

Si vous avez essayé d’implémenter ces mises en page vous-même, échoué, puis réessayé, vous devriez déjà avoir suffisamment de compétences pour implémenter tout type de mise en page. Vous pouvez appliquer les choses que vous avez apprises ici pour implémenter même les mises en page 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.

  • Une introduction au module CSS Flexbox

    HTML et CSS
  • Premiers pas avec les mises en page natives React

  • Créez une application sociale avec React Native

  • Animez votre application native React

  • Comment créer une application de détection de visage avec React Native

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.