L’idée est de commencer par le simple projet React Native. Ensuite, nous ajouterons des images, les emballerons avec différents composants du paquet réactif natif et le configurerons pour implémenter la transition des éléments partagés réactifs-natifs.
Alors commençons!
Commencez avec un projet vide
Commençons par créer une application initiale React Native. Pour cela, nous devons exécuter les commandes suivantes dans notre répertoire souhaité:
>> init-réag-native Une fois l'installation de l'application réact-native vierge terminée, nous allons exécuter l'application sur notre émulateur iOS à l'aide de la commande suivante:
En conséquence, nous obtiendrons le résultat suivant sur l'écran de notre émulateur:
Ajouter une image et la configurer
Nous allons maintenant ajouter des images à notre application Pour cela, nous devons supprimer tout le code inutile de notre fichier App.js . Ensuite, nous devons ajouter le code suivant à notre fichier App.js . Les images sont importées du répertoire images. Nous pouvons créer notre propre répertoire d'images dans le répertoire source de notre projet, ajouter nos propres images, puis les importer dans une constante de matrice, comme indiqué dans le fragment de code ci-dessous:
import React de [19659012] & # 39; réagir & # 39; ;
import {Voir} depuis & # 39; rea-native & # 39; ;
const images = [
{ id : 1 src : require ( & # 39;. / Image / 1.jpeg & # 39; ) },
{ id : 2 src : require ( & # 39;. / Image / 2.jpeg & # 39; ) },
{ id : 3 src : require ( & # 39;. / Image / 3.jpeg & # 39; ) },
{ id : 4 src : require ( & # 39;. / Image / 4.jpeg & # 39; ) },
];
export default classe La demande s'étend au React . Composant {
render () {
return < Voir > </ Voir > ;
}
} Dans l'extrait de code ci-dessus, nous n'avons inclus que les images constantes et un composant Voir du paquet réactif-native. Par conséquent, l'application apparaîtra vide dans l'émulateur si nous l'exécutons à nouveau.
Ensuite, pour ajouter les images importées à notre écran, nous allons remplacer le composant Voir par ] composant ScrollView afin que nous puissions voir les images à l'écran en les faisant défiler vers le haut et vers le bas. vers le bas. Ensuite, nous allons cartographier les images à l'écran en utilisant la fonction map qui nous aide à naviguer dans la matrice et à renvoyer les éléments JSX. Ici, l'élément que nous renvoyons de la fonction map est le composant Image dans lequel les images importées sont intégrées. Pour cela, nous pouvons utiliser le code fourni dans l’extrait de code suivant:
import React de & # 39; react & # 39; ;
import {Image, ScrollView} depuis & # 39; rea-native & # 39; ;
const images = [
{ id : 1 src : require ( & # 39;. / Image / 1.jpeg & # 39; ) },
{ id : 2 src : require ( & # 39;. / Image / 2.jpeg & # 39; ) },
{ id : 3 src : require ( & # 39;. / Image / 3.jpeg & # 39; ) },
{ id : 4 src : require ( & # 39;. / Image / 4.jpeg & # 39; ) },
];
export default classe La demande s'étend au React . Composant {
render () {
retour (
< ScrollView style = {{flex: 1 }}
{images.map (image => {
retour
})}
);
}
} En conséquence, nous obtiendrons l'écran suivant dans notre émulateur:
Comme nous pouvons le voir dans la simulation d'émulateur ci-dessus, les images ils apparaissent à l'écran et sont donc défilables.
Habillage de l'image
L'étape suivante consiste à emballer le composant Image en utilisant TouchableWithOutFeedBack et ] en composant d'affichage animé pour créer une animation lorsque touche Le composant TouchableWithOutFeedBack permet de cliquer sur les images sans fournir de retour à l'écran, tandis que le composant Animated View entraîne l'animation des images avec une vue appropriée. Par conséquent, le code à mettre en œuvre est fourni dans l'extrait de code ci-dessous:
import React de & # 39; rea & # 39; ;
import {
L'image,
ScrollView,
Toucher sans retour,
Animé,
} de & # 39; rea-native & # 39; ;
const images = [
{ id : 1 src : require ( & # 39;. / Image / 1.jpeg & # 39; ) },
{ id : 2 src : require ( & # 39;. / Image / 2.jpeg & # 39; ) },
{ id : 3 src : require ( & # 39;. / Image / 3.jpeg & # 39; ) },
{ id : 4 src : require ( & # 39;. / Image / 4.jpeg & # 39; ) },
];
export default classe La demande s'étend au React . Composant {
render () {
retour (
< ScrollView style = {{flex: 1 }}
{images.map (image => {
retour (
);
})}
)
}
} Ajout de configurations de taille à la composante Image avec dimensions
Au cours de cette étape, nous allons configurer la hauteur et la largeur de nos images en fonction de la taille de l'écran. Pour obtenir la hauteur et la largeur de l'écran, nous allons utiliser le composant Dimensions fourni par le paquetage react-native. Dimensions Le composant fournit la fonction get () qui permet d'obtenir la largeur et la hauteur de la fenêtre en plein écran. Ici, nous allons stocker la hauteur et la largeur de la fenêtre d'écran dans deux variables, à savoir SCREEN_WIDTH ET SCREEN_HEIGHT comme indiqué dans l'extrait de code ci-dessous: [19659006] Image,
ScrollView,
Toucher sans retour,
Animé,
Les dimensions,
} de & # 39; rea-native & # 39; ;
let SCREEN_WIDTH = Dimensions.get ( & # 39; de la fenêtre & [399023]). Largeur
let SCREEN_HEIGHT = Dimensions.get ( & # 39; de la fenêtre & [399023]). Hauteur
Ensuite, nous allons ajouter ces paramètres de style de taille à notre Le composant vue animée avec une hauteur réduite de 150, comme indiqué dans l'extrait de code a. suite:
< Animated.View
style = {{
height: SCREEN_HEIGHT - 150 [
width: SCREEN_WIDTH ,
remplissage: 15 ,
}}>
Nous obtenons donc le résultat suivant sur l'écran de l'émulateur:
Ajouter des styles à l'image
Cette étape est relativement simple. Nous allons simplement ajouter quelques styles en ligne à notre composant Image pour le rendre plus attrayant. Nous allons ajouter les styles en ligne à l'aide de l'accessoire de style, comme indiqué dans l'extrait de code ci-dessous:
< Animated.View
style = {{
height: SCREEN_HEIGHT - 150 [
width: SCREEN_WIDTH ,
remplissage: 15 ,
}}>
style={{
flex: 1,
height: null,
width: null,
resizeMode: 'cover',
borderRadius: 20,
}}
/>
Nous obtenons donc le résultat suivant sur l'écran de notre émulateur, où les images apparaissent mieux qu'avant.
Mais, comme on peut le constater, la barre d'état de l'émulateur est superposée sur l'image de l'application.
Donc, pour corriger cela, nous allons ajouter un conteneur SafeAreaView . Le composant SafeAreaView a pour fonction de représenter le contenu dans les limites de la zone de sécurité d'un périphérique. Ensuite, ajustons le composant ScrollView avec le composant SafeAreaView comme indiqué dans l'extrait de code ci-dessous:
import Réagir [19659012] & # 39; réagir & # 39; ;
import {
L'image,
ScrollView,
Toucher sans retour,
Animé,
Les dimensions,
SafeAreaView,
} de & # 39; rea-native & # 39; ;
const images = [
{ id : 1 src : require ( & # 39;. / Image / 1.jpeg & # 39; ) },
{ id : 2 src : require ( & # 39;. / Image / 2.jpeg & # 39; ) },
{ id : 3 src : require ( & # 39;. / Image / 3.jpeg & # 39; ) },
{ id : 4 src : require ( & # 39;. / Image / 4.jpeg & # 39; ) },
];
let SCREEN_WIDTH = Dimensions.get ( & # 39; de la fenêtre & [399023]). Largeur
let SCREEN_HEIGHT = Dimensions.get ( & # 39; de la fenêtre & [399023]). Hauteur
export default classe La demande s'étend au React . Composant {
render () {
retour (
< Style SafeAreaView = {{flex: 1 }}>
{images.map (image => {
retour (
height: SCREEN_HEIGHT - 150,
width: SCREEN_WIDTH,
padding: 15,
}}>
style={{
flex: 1,
height: null,
width: null,
resizeMode: 'cover',
borderRadius: 20,
}}
/>
);
})}
);
}
} Nous obtenons donc le résultat suivant sur notre écran d'émulateur:
Conclusion
Dans cette première partie du didacticiel, nous avons appris à configurer l'application de réaction à blanc native. Nous avons également appris à utiliser différents composants du package react-native. De plus, nous avons également obtenu un guide détaillé sur la configuration de l'interface utilisateur image pour l'animation et l'utilisation des composants Dimensions, ScrollView et SafeAriaView. Enfin, nous avons terminé avec succès notre implémentation des transitions d’éléments partagés de React Native.
Credit
Divulgation
Cette publication contient des liens affiliés; Je peux recevoir une compensation si vous achetez des produits ou des services à partir des différents liens fournis dans cet article.