Résumé
Dans cette vidéo, le développeur continue sa série de tutoriels sur React Native en construisant un composant similaire aux stories d’Instagram. Il utilise React Native 0.73 et Expo SDK 50 pour créer des animations de transition avancées entre les stories. Il introduit la propriété transform origin pour des transformations plus précises et explique comment initialiser un projet avec Expo et React Native 0.73. Il crée un tableau d’images et de stories pour simuler le fonctionnement d’Instagram. Enfin, il affiche une image en plein écran et ajoute un en-tête avec le nom de l’utilisateur. Le développeur encourage également les dons pour une collecte de fonds en faveur de l’éducation des enfants.
Points saillants
- Construction d’un composant de stories Instagram avec React Native et Expo.
- Utilisation de React Native 0.73 et Expo SDK 50 pour des animations avancées.
- Introduction de la propriété transform origin pour des transformations précises.
- Initialisation d’un projet avec Expo et React Native 0.73.
- Création d’un tableau d’images et de stories pour simuler le fonctionnement d’Instagram.
- Affichage d’une image en plein écran et ajout d’un en-tête avec le nom de l’utilisateur.
- Encouragement des dons pour une collecte de fonds en faveur de l’éducation des enfants.
Session Q&A
Qu’est-ce que l’épisode d’aujourd’hui de la série DEVember se concentre sur ?
L’épisode d’aujourd’hui se concentre sur la construction du composant des stories Instagram en React Native avec Reanimated. Il permettra de visualiser des images de manière similaire à Instagram, en permettant de passer d’une story à une autre.
Quelles fonctionnalités spécifiques seront abordées dans l’épisode d’aujourd’hui ?
L’épisode d’aujourd’hui se concentrera sur la construction du composant des stories Instagram, la navigation à travers les différentes stories, les animations basées sur le temps pour afficher la barre de progression de la story, et des animations avancées pour la transition entre les stories.
Quelles versions de React Native et Expo seront utilisées dans le tutoriel ?
Le tutoriel utilisera la dernière version de React Native 0.73 et Expo SDK 50, qui est en version bêta au moment de l’enregistrement de la vidéo.
Comment initialiser un nouveau projet avec React Native 0.73 et Expo SDK 50 ?
Pour utiliser React Native 0.73 dans Expo, il est nécessaire d’utiliser la version SDK 50 ou supérieure. Ensuite, il suffit d’initialiser un nouveau projet en utilisant la commande « npx create expo-app » avec le template « blank » et la version « beta ».
Quelles fonctionnalités de React Native 0.73 seront utilisées dans la construction du composant des stories Instagram ?
La vidéo mentionne l’utilisation de la nouvelle propriété « transform origin » ajoutée dans la version 0.73 de React Native. Cette propriété permet de modifier le centre de transformation, ce qui est utile pour les rotations et les translations.
Comment afficher une image en plein écran en React Native ?
Pour afficher une image en plein écran en React Native, il suffit d’utiliser le composant « Image » et de lui fournir une source avec une URL publiquement accessible, ainsi que des styles pour définir la largeur et la hauteur à 100% de l’écran.
Comment accéder aux stories d’un utilisateur spécifique dans l’application ?
Pour accéder aux stories d’un utilisateur spécifique, il est possible de récupérer les stories à partir de la liste des utilisateurs, puis de sélectionner les stories du user index correspondant.
Par. notJust․dev.
