L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Cloner Tinder à l'aide de React Native Elements et de Expo –
Il est difficile de disposer de dispositions de pixels parfaites sur un mobile. Même si React Native facilite la tâche par rapport à ses homologues natifs, il faut encore beaucoup de travail pour obtenir une application mobile à la perfection.
Dans ce tutoriel, nous allons cloner la plus célèbre application de rencontres, Tinder. Nous découvrirons ensuite un framework d'interface utilisateur appelé React Native Elements qui facilite le style des applications React Native.
Comme il ne s'agit que d'un didacticiel de mise en page, nous allons utiliser Expo, car cela rend les choses beaucoup plus faciles à mettre en place que le vieux un peu vieux [Native-Cli. Nous utiliserons également beaucoup de données factices pour créer notre application
Nous créerons quatre écrans en tout … Accueil Coups de cœur Profil et Messages .
Voulez-vous apprendre Réagissez Autochtone de la base? Cet article est un extrait de notre bibliothèque Premium. Obtenez une collection complète de livres natifs de React couvrant les bases, les projets, les astuces, les outils, etc., avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ / mois .
Prérequis
Pour ce tutoriel, vous devez posséder des connaissances de base de Réagir Native et avoir une connaissance suffisante de de Expo . . Vous aurez également besoin du client Expo installé sur votre appareil mobile ou d'un simulateur compatible installé sur votre ordinateur. Vous trouverez des instructions sur la procédure à suivre ici ici .
Vous devez également posséder une connaissance de base des styles de dans React Native. Les styles dans React Native sont fondamentalement une abstraction similaire à celle de CSS, avec seulement quelques différences. Vous pouvez obtenir une liste de toutes les propriétés dans la feuille de feuille de style .
Tout au long de ce didacticiel, nous utiliserons le fil . Si vous n'avez pas le fil déjà installé, installez-le à partir de ici .
Assurez-vous également que vous avez déjà installé expo-cli sur votre ordinateur. .
S'il n'est pas déjà installé, installez-le:
$ yarn global add expo-cli
Pour vous assurer que nous sommes sur la même page, voici les versions utilisées dans ce tutoriel:
- Noeud 11.14.0
- npm 6.4.1
- fil 1.15.2
- expo 2.16. 1
Assurez-vous de mettre à jour expo-cli si vous ne l'avez pas mise à jour depuis un moment, car les versions de expo sont rapidement obsolètes.
Nous allons construisez quelque chose qui ressemble à ceci:
Si vous voulez simplement cloner le repo, le code complet se trouve sur GitHub .
Pour commencer
Mettons en place un nouveau projet d’exposition utilisant expo-cli :
$ expo init expo-tinder
Il vous sera ensuite demandé de choisir un modèle. Vous devez choisir tabs et appuyer sur . Entrez .
Ensuite, il vous sera demandé de nommer le projet. Tapez de l'expo et tapez . Entrez à nouveau .
Enfin, il vous sera demandé de presser y pour installer des dépendances avec le fil ou n pour installer des dépendances avec npm . Appuyez sur et .
Cette application permet de créer une nouvelle application React Native utilisant expo-cli .
Réagissez Native Elements
React Native Elements est une boîte à outils d'interface utilisateur multiplate-forme pour React Native avec une conception cohérente pour Android, iOS et le Web.
Il est facile à utiliser et entièrement construit avec JavaScript. C'est également le tout premier kit d'interface utilisateur conçu pour React Native.
Il nous permet de personnaliser entièrement les styles de chacun de nos composants, de manière à ce que chaque application ait son propre aspect et sa propre sensation.
open source et soutenu par une communauté de développeurs impressionnants .
Vous pouvez créer facilement de belles applications.
Cloning Tinder UI
We 'a déjà créé un projet nommé expo-tinder .
Pour exécuter le projet, tapez ceci:
$ yarn start
Appuyez sur i pour exécuter le simulateur iOS. Ceci fera automatiquement fonctionner le simulateur iOS même s’il n’est pas ouvert.
Appuyez sur a pour exécuter l’émulateur Android. Notez que l'émulateur doit déjà être installé et démarré avant de taper a . Sinon, une erreur se produira dans le terminal.
Il devrait ressembler à ceci:
Navigation
La configuration initiale a déjà été installée react-navigation pour nous. La navigation par les onglets du bas fonctionne également par défaut car nous avons choisi les onglets dans la deuxième étape de expo init . Vous pouvez le vérifier en appuyant sur Liens et Paramètres .
Le dossier écrans / est responsable du contenu affiché lorsque les onglets sont modifiés.
] Maintenant, supprimez complètement le contenu de HomeScreen.js et remplacez-le par le texte suivant:
import Réaction de 'react'
importer {Text, View} de 'react-native'
classe HomeScreen étend React.Component {
render () {
revenir (
Écran d'accueil
)
}
}
export par défaut HomeScreen
Vous devriez voir la nouvelle interface maintenant:
Nous allons maintenant adapter les onglets à l’application que nous allons créer. Pour notre clone Tinder, nous allons avoir quatre écrans: Accueil Coups de cœur Profil et Messages . [19659003] Nous pouvons supprimer complètement LinksScreen.js et SettingsScreen.js du dossier screens / . Notez que notre application se casse, avec un écran rouge plein d’erreurs.
En effet, nous y sommes liés dans le dossier de navigation / . Ouvrez MainTabNavigator.js dans le dossier de navigation / . Il ressemble actuellement à ceci:
import Réagissez à partir de 'réagit';
importer {Platform} de 'react-native';
import {createStackNavigator, createBottomTabNavigator} de 'react-navigation';
importer TabBarIcon de '../components/TabBarIcon';
importer HomeScreen de '../screens/HomeScreen';
importer LinksScreen de '../screens/LinksScreen';
importer SettingsScreen de '../screens/SettingsScreen';
const HomeStack = createStackNavigator ({
Accueil: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({focus}) => (
Supprimer complètement les références à LinksStack et SettingsStack car nous n’avons pas besoin de ces écrans dans notre application. Cela devrait ressembler à ceci:
import Réagissez à partir de 'réagit'
importer {Platform} de 'react-native'
importer {
createBottomTabNavigator,
createStackNavigator,
} de 'réagir-navigation'
importer TabBarIcon de '../components/TabBarIcon'
importer HomeScreen de '../screens/HomeScreen'
const HomeStack = createStackNavigator ({
Accueil: HomeScreen,
})
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({focus}) => (
Allez-y et créez TopPicksScreen.js ProfileScreen.js et MessagesScreen.js dans le dossier d'écrans / .
. ] Ajoutez ce qui suit dans TopPicksScreen.js :
import Réagissez à partir de 'réagir'
importer {Text, View} de 'react-native'
La classe TopPicksScreen étend React.Component {
render () {
revenir (
Écran Meilleurs choix
)
}
}
exporter par défaut TopPicksScreen
Ajouter ce qui suit dans ProfileScreen.js :
import Réagissez à partir de 'réagir'
importer {Text, View} de 'react-native'
la classe ProfileScreen étend React.Component {
render () {
revenir (
Écran de profil
)
}
}
exporter ProfileScreen par défaut
Ajouter ce qui suit dans MessagesScreen.js :
import Réagissez à partir de 'réagir'
importer {Text, View} de 'react-native'
La classe MessagesScreen étend React.Component {
render () {
revenir (
Écran Messages
)
}
}
exporter par défaut MessagesScreen
Continuons et changeons de composants / TabBarIcon.js car nous aurons besoin d’icônes personnalisées dans la navigation de l’onglet inférieur. Il ressemble actuellement à ceci:
import Réagissez à partir de 'réagit';
importer {Icon} de 'expo';
importer des couleurs à partir de '../constants/Colors';
La classe d'exportation TabBarIcon par défaut s'étend à React.Component {
render () {
revenir (
La seule chose que nous faisons ici est d’ajouter un accessoire Icon afin d’avoir différents types de Icon au lieu de seulement Ionicons . Actuellement, les différents types pris en charge sont AntDesign Entypo EvilIcons Feather FontAwesome . FontAwesome5 FontAwesome5Brands Fondation Ionicons MatérielCommunauté Octicons et Zocial .
Vous pouvez choisir différentes icônes dans le répertoire @ expo / vector-icons . Il ajoute une couche de compatibilité autour de @ oblador / react-native-vector-icons pour fonctionner avec le système d'actifs de l'Expo.
TabBarIcon.js devrait maintenant ressembler à ceci:
] import Réagir de 'réagir'
importer des couleurs depuis '../constants/Colors'
La classe d'exportation TabBarIcon par défaut s'étend à React.Component {
render () {
const {Icône, nom, ciblé} = this.props
revenir (
Nous pouvons maintenant passer le composant Icon au composant TabBarIcon ci-dessus pour charger différentes icônes.
Nous devons modifier la mise en œuvre de HomeStack dans. le dossier MainTabNavigator.js à incorporer dans le nouveau élément TabBarIcon du composant du composant modifié:
import {Icon} de 'expo'
const HomeStack = createStackNavigator ({
Accueil: HomeScreen,
})
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({focus}) => (
Le seul changement ici est l'ajout de Icon = {Icon.MaterialCommunityIcons} car nous avons modifié l'implémentation de TabBarIcon pour accepter le code source afin de pouvoir utiliser différents types de icônes de différents fournisseurs.
Maintenant, ces icônes doivent être chargées en premier. Sinon, nous verrons un écran vide avant que les icônes ne s'affichent. Pour cela, nous devons changer App.js en ajoutant ce qui suit:
Font.loadAsync ({
// Ceci est la police que nous utilisons pour notre barre d'onglets
... Icon.MaterialIcons.font,
... Icon.MaterialCommunityIcons.font,
... Icon.FontAwesome.font,
... Icon.Feather.font,
}),
Ces types de police sont utilisés à certains moments dans notre application. C’est pourquoi nous n’avons inclus que quatre polices. Par exemple, MaterialCommunityIcons est utilisé dans la variable HomeStack dans le MainTabNavigator.js comme indiqué ci-dessus.
Nous allons également masquer notre StatusBar dans App.js avec ceci:
Nous remplacerons également les actifs utilisés dans App.js :
Asset.loadAsync ([
require('./assets/images/splash.png'),
require('./assets/images/icon.png'),
]),
Le fichier App.js devrait maintenant ressembler à ceci:
import {AppLoading, Asset, Font, Icon} de 'expo'
importer Réagir de 'réagir'
importer {StatusBar, StyleSheet, View} de 'react-native'
importer AppNavigator à partir de './navigation/AppNavigator'
exporter la classe par défaut App étend React.Component {
state = {
isLoadingComplete: false,
}
render () {
if (! this.state.isLoadingComplete &&! this.props.skipLoadingScreen) {
revenir (
}
}
_loadResourcesAsync = async () => {
retour Promise.all ([
Asset.loadAsync([
require('./assets/images/splash.png'),
require('./assets/images/icon.png'),
]),
Font.loadAsync ({
// Ceci est la police que nous utilisons pour notre barre d'onglets
... Icon.MaterialIcons.font,
... Icon.MaterialCommunityIcons.font,
... Icon.FontAwesome.font,
... Icon.Feather.font,
}),
])
}
_handleLoadingError = error => {
// Dans ce cas, vous pouvez signaler l'erreur à votre erreur.
// service de génération de rapports, tel que Sentry
console.warn (erreur)
}
_handleFinishLoading = () => {
this.setState ({isLoadingComplete: true})
}
}
const styles = StyleSheet.create ({
récipient: {
flex: 1,
backgroundColor: '#fff',
},
})
Nous devons également relier tous les écrans ci-dessus - TopPicksScreen.js ProfileScreen.js et MessagesScreen.js —inférieur écrans / in MainTabNavigator.js dans le dossier navigation / comme indiqué dans l'organigramme suivant:
affiché dans l'organigramme suivant:
Ajoutez également le code suivant: dans MainTabNavigator.js :
importez MessagesScreen de '../screens/MessagesScreen'
importer ProfileScreen de '../screens/ProfileScreen'
importer TopPicksScreen de '../screens/TopPicksScreen'
const TopPicksStack = createStackNavigator ({
TopPicks: TopPicksScreen,
})
TopPicksStack.navigationOptions = {
tabBarLabel: 'TopPicks',
tabBarIcon: ({focus}) => (
Le code ci-dessus crée trois navigateurs de pile - TopPicksStack MessagesStack et ProfileStack . La propriété statique navigationOptions nous permet d'ajouter notre propre étiquette et notre icône à l'onglet inférieur.
De plus, changez createBottomTabNavigator pour vous assurer de TopPicksStack . MessagesStack et ProfileStack apparaissent dans l'onglet de navigation inférieur:
export par défaut createBottomTabNavigator ({
HomeStack,
TopPicksStack,
MessagesStack,
ProfileStack,
})
Maintenant, vous devriez pouvoir voir différentes icônes dans la navigation de l'onglet inférieur avec différents écrans, comme suit:
Nous devons maintenant supprimer le en-tête qui apparaît sur chaque écran, occupant un espace supérieur. Pour s'en débarrasser, nous devons ajouter headerMode: 'none' dans la createStackNavigator de la configuration
à ajouter dans HomeStack TopPicksStack MessagesStack et ProfileStack .
HomeStack devrait ressembler à ceci:
.
{
Accueil: HomeScreen,
},
{
headerMode: 'aucun',
},
)
Faites de même pour le reste d'entre eux. Maintenant, si vous vérifiez, le texte monte en haut à gauche, juste au-dessus de l’horloge.
Il existe une solution simple à cela. Nous devons utiliser SafeAreaView . SafeAreaView restitue le contenu dans les limites de la zone de sécurité d'un périphérique. Lançons dans le répertoire écrans / et changez HomeScreen.js pour utiliser SafeAreaView de sorte qu’il ressemble à ceci:
import Réagissez à partir de "réagissez"
importer {SafeAreaView, Text} de 'react-native'
classe HomeScreen étend React.Component {
render () {
revenir (
Écran d'accueil
)
}
}
export par défaut HomeScreen
Il restitue maintenant le contenu à l'intérieur des limites de l'appareil.
Allez-y et changez le reste pour qu'il en fasse de même.
C'est répétitif pour encapsuler SafeAreaView dans chaque composant au lieu de le configurer sur un composant racine tel que App.js . Mais sachez que cela ne fonctionnera pas si vous essayez de le faire sur App.js .
N'oubliez pas que SafeAreaView doit toujours être configuré sur les composants d'écran ou leur contenu. , et ne pas envelopper des navigateurs entiers. Vous pouvez en savoir plus sur cet article de blog .
Écrans
Maintenant que notre navigation est prise en charge, nous pouvons commencer à travailler sur la présentation.
Nous allons être en utilisant un kit d’interface utilisateur appelé React Native Elements, alors installez-le:
$ yarn add rea-native-elements
Avant de commencer, assurez-vous de copier le répertoire assets / du GitHub repo entièrement pour les images factices.
Nous allons maintenant commencer à travailler sur l'écran d'accueil.
Écran d'accueil
Avant de commencer à travailler sur HomeScreen.js supprimons les fichiers inutiles. Allez dans le dossier components / et supprimez le StyledText.js et le __ tests __ .
Commençons par travailler sur notre écran d'accueil.
Tout d'abord. , créez Card.js dans le dossier composants / . Nous allons afficher une carte de profil avec le nom de la personne, son âge et sa distance.
Nous allons utiliser un composant Tile de react-native-elements pour afficher notre carte d'utilisateur.
Le composant Tile de react-native-elements ressemble à ceci:
import Réagissez à partir de 'réagir'
importer {Platform, StyleSheet} de 'react-native'
importer {Tile} de 'react-native-elements'
importer une mise en page à partir de '../constants/Layout'
const BOTTOM_BAR_HEIGHT =! Platform.isPad? 29: 49 // trouvé à partir de https://stackoverflow.com/a/50318831/6141587
export const Carte = ({image, titre, légende}) => (
Le composant Card prend la pic titre et légende qui sont à leur tour transmis au carreau . Composant de .
Le composant Tile a quelques propriétés supplémentaires. activeOpacity est un nombre passé pour contrôler l'opacité lorsque vous appuyez sur la mosaïque. Cette valeur est facultative, mais la valeur par défaut est 0,2, ce qui la rend transparente sur la presse. Nous passons donc une valeur proche de 1 pour qu'elle reste opaque. . L'appui présenté change l'apparence de Tile . Il conserve le texte dans le titre et une légende du accessoire sur l'image plutôt qu'en dessous lorsque présenté n'est pas spécifié ou est défini sur false . .
Les autres sont des styles appliqués pour obtenir une carte d'utilisateur correcte. Le style conteneur centre la carte utilisateur. imageContainer a une largeur et une hauteur. La largeur est définie sur la largeur totale du périphérique - 30dp (pixels du périphérique) - et la hauteur est définie sur la hauteur totale du périphérique - BOTTOM_BAR_HEIGHT * 6 .
Nous obtenons le BOTTOM_BAR_HEIGHT du stackoverflow.com .
Nous obtenons la largeur du périphérique à partir du fichier constants / Layout.js qui contient essentiellement les éléments suivants:
import {Dimensions} de 'react-native'
const width = Dimensions.get ('window'). width
const height = Dimensions.get ('window'). height
défaut d'exportation {
fenêtre: {
largeur,
la taille,
},
isSmallDevice: width <375,
}
Ensuite, nous ajoutons un rayon de bordure à l'image. Mais le rayon de la frontière ne sera pas appliqué. Nous avons également besoin de overflow: hidden pour que cela fonctionne.
Ensuite, nous positionnons nos titres et de position à utiliser et [faites-lesapparaîtredanslecoininférieurgauchejusteau-dessusdel'image
Créez ensuite un fichier utils / shuffleArray.js et collez-y le fichier suivant:
// trouvé à l'adresse https: //stackoverflow.com/a/46545530/6141587
const shuffleArray = array =>
tableau
.map (a => ({sort: Math.random (), valeur: a}))
.sort ((a, b) => a.sort - b.sort)
.map (a => a.value)
exportation par défaut shuffleArray
Ceci s'assure que notre tableau est randomisé à chaque fois.
Créez maintenant un fichier constantes / Pics.js et collez-le comme suit:
import shuffleArray à partir de '../utils/shuffleArray '
export const HomeScreenPics = shuffleArray ([
{
pic: require('../assets/images/women/women1.jpg'),
title: 'Amelia, 27',
caption: '16 miles away',
},
{
pic: require('../assets/images/women/women2.jpg'),
title: 'Joanna, 19',
caption: '2 miles away',
},
{
pic: require('../assets/images/women/women3.jpg'),
title: 'Charlie, 32',
caption: '24 miles away',
},
{
pic: require('../assets/images/women/women4.jpg'),
title: 'Mary, 23',
caption: '45 miles away',
},
{
pic: require('../assets/images/women/women5.jpg'),
title: 'Lucy, 27',
caption: '32 miles away',
},
{
pic: require('../assets/images/women/women6.jpg'),
title: 'Rachel, 29',
caption: '30 miles away',
},
{
pic: require('../assets/images/women/women7.jpg'),
title: 'Ava, 31',
caption: '14 miles away',
},
{
pic: require('../assets/images/women/women8.jpg'),
title: 'Monica, 35',
caption: '19 miles away',
},
{
pic: require('../assets/images/women/women9.jpg'),
title: 'Lisa, 25',
caption: '7 miles away',
},
{
pic: require('../assets/images/women/women10.jpg'),
title: 'Julia, 22',
caption: '9 miles away',
},
{
pic: require('../assets/images/men/men1.jpg'),
title: 'Aaron, 24',
caption: '3 miles away',
},
{
pic: require('../assets/images/men/men2.jpg'),
title: 'Novak, 27',
caption: '12 miles away',
},
{
pic: require('../assets/images/men/men3.jpg'),
title: 'Justin, 32',
caption: '20 miles away',
},
{
pic: require('../assets/images/men/men4.jpg'),
title: 'Tony, 21',
caption: '4 miles away',
},
{
pic: require('../assets/images/men/men5.jpg'),
title: 'Leo, 30',
caption: '22 miles away',
},
{
pic: require('../assets/images/men/men6.jpg'),
title: 'Ronald, 39',
caption: '35 miles away',
},
{
pic: require('../assets/images/men/men7.jpg'),
title: 'Johnny, 41',
caption: '44 miles away',
},
{
pic: require('../assets/images/men/men8.jpg'),
title: 'Chandler, 35',
caption: '29 miles away',
},
{
pic: require('../assets/images/men/men9.jpg'),
title: 'Joey, 29',
caption: '17 miles away',
},
{
pic: require('../assets/images/men/men10.jpg'),
title: 'Alfie, 37',
caption: '27 miles away',
},
])
Il contient toutes les images nécessaires à notre application. Remarquez chaque fois que nous appelons shuffleArray pour randomiser notre tableau.
Laissons l’installation réagir pour que nos cartes soient balayées comme Tinder. La dernière version (v1.6.7 au moment de la rédaction) utilise réagit-native-view-overflow qui ne prend pas en charge Expo. Nous allons donc installer la v1.5.25:
$ yarn add react-native-deck-swiper@1.5.25
Maintenant, allez dans le fichier HomeScreen.js et collez ce qui suit:
import Réagissez à partir de 'react'
importer {SafeAreaView, StyleSheet} de 'react-native'
importer Swiper de 'react-native-deck-swiper'
importer {Carte} de '../components/Card'
importer {HomeScreenPics} de '../constants/Pics'
classe HomeScreen étend React.Component {
render () {
revenir (
)
}
}
const styles = StyleSheet.create ({
récipient: {
flex: 1,
backgroundColor: 'transparent',
},
})
export par défaut HomeScreen
Maintenant, nos cartes sont échangeables, et notre écran d'accueil ressemble à ceci:
Essayez de glisser à présent, et cela devrait fonctionner comme suit:
Si vous le souhaitez Pour savoir comment créer ce genre d'animations Tinder Swipe, vous devriez jeter un coup d'œil à la série Tinders Swipe de Varun Nath sur YouTube.
Maintenant que notre écran d'accueil est terminé, construisons l’écran Top Picks.
Écran Top Picks
À présent, concevons l’écran Top Picks.
Commençons par constants / Pics.js et ajoutons le bit suivant à la fin: [19659051] export const TopPicksScreenPics = shuffleArray ([
{
pic: require('../assets/images/women/women11.jpg'),
title: 'Annie, 40',
caption: '26h left',
},
{
pic: require('../assets/images/women/women12.jpg'),
title: 'Lena, 31',
caption: '20h left',
},
{
pic: require('../assets/images/women/women13.jpg'),
title: 'Kendra, 19',
caption: '15h left',
},
{
pic: require('../assets/images/women/women14.jpg'),
title: 'Mia, 23',
caption: '45h left',
},
{
pic: require('../assets/images/women/women15.jpg'),
title: 'Jenny, 27',
caption: '12h left',
},
{
pic: require('../assets/images/men/men11.jpg'),
title: 'Dwayne, 34',
caption: '13h left',
},
{
pic: require('../assets/images/men/men12.jpg'),
title: 'Novak, 27',
caption: '22h left',
},
{
pic: require('../assets/images/men/men13.jpg'),
title: 'Zikomo, 32',
caption: '20h left',
},
{
pic: require('../assets/images/men/men14.jpg'),
title: 'Sam, 19',
caption: '42h left',
},
{
pic: require('../assets/images/men/men15.jpg'),
title: 'Richard, 31',
caption: '21h left',
},
])
Voici les images dont nous aurons besoin dans l’écran Choix principaux.
Maintenant, ajoutez le code suivant dans TopPicksScreen.js :
import Réagissez à partir de 'react'
importer {ScrollView, StyleSheet, View} de 'react-native'
importer {Text, Tile} de 'react-native-elements'
importer {SafeAreaView} de 'react-navigation'
importer {TopPicksScreenPics} de '../constants/Pics'
La classe TopPicksScreen étend React.Component {
render () {
revenir (
Meilleurs choix
Profils en vedette du jour, choisis juste pour vous
{TopPicksScreenPics.map (({image, titre, légende}, i) => (
)
}
}
const styles = StyleSheet.create ({
h2Style: {
fontWeight: 'gras',
textAlign: 'center',
couleur: '# 000000',
},
h4Style: {
textAlign: 'center',
couleur: '# 757575',
},
la grille: {
marginTop: 20,
marginBottom: 20,
},
Titre: {
position: 'absolu',
à gauche: 10
en bas: 50
backgroundColor: 'noir',
marginBottom: -2,
rembourrage: 10
},
légende: {
position: 'absolu',
à gauche: 10
en bas: 0,
backgroundColor: 'noir',
marginTop: 10,
rembourrage: 10
},
})
exporter par défaut TopPicksScreen
Dans un premier temps, nous utilisons le composant de base Text trouvé dans avec éléments et sous-titres.
Nous parcourons ensuite toutes les images ajoutées. dans constantes / Pics.js et affichez-les à l'aide des composants Tile .
Le titre est placé dans . ] center par défaut, mais nous les avons déplacés vers le bas à gauche avec la position : 'absolute' .
Ceci conclut notre écran Top Picks, qui était très simple.
Il ressemble à ceci:
Écran Messages
Commençons par l’écran Messages. Premièrement, nous avons besoin de données factices à afficher sur les listicles.
Créez Messages.js dans le dossier constantes / et collez-le comme suit:
import shuffleArray from ' ../utils/shuffleArray '
export const Messages = shuffleArray ([
{
pic: require('../assets/images/women/women1.jpg'),
title: 'Amelia, 27',
message: "Let's get to your favorite restaurant.",
},
{
pic: require('../assets/images/women/women2.jpg'),
title: 'Joanna, 19',
message: "What's the best way to win you over?",
},
{
pic: require('../assets/images/men/men2.jpg'),
title: 'Novak, 27',
message: 'Will catch up with you later.',
},
{
pic: require('../assets/images/men/men3.jpg'),
title: 'Justin, 32',
message: 'Probably not going to work out :(',
},
{
pic: require('../assets/images/women/women3.jpg'),
title: 'Charlie, 32',
message: 'How about we go for a coffee on Sunday?',
},
{
pic: require('../assets/images/women/women5.jpg'),
title: 'Lucy, 27',
message: 'Sleeping for now.',
},
{
pic: require('../assets/images/men/men1.jpg'),
title: 'Aaron, 24',
message: 'See you soon.',
},
{
pic: require('../assets/images/men/men4.jpg'),
title: 'Tony, 21',
message: 'Seriously, come on time.',
},
{
pic: require('../assets/images/men/men5.jpg'),
title: 'Leo, 30',
message: "What'd you like?",
},
{
pic: require('../assets/images/women/women4.jpg'),
title: 'Mary, 23',
message: "Hey, what's up?",
},
{
pic: require('../assets/images/women/women14.jpg'),
title: 'Michelle, 45',
message: 'Howdy!!!',
},
{
pic: require('../assets/images/women/women12.jpg'),
title: 'Arya, 18',
message: 'Not today!',
},
])
Ensuite, créez MessagesScreen.js dans le dossier composants / et collez-le comme suit:
import Réagissez à partir de 'react'
importer {SafeAreaView, ScrollView, StyleSheet} à partir de 'react-native'
importer {ListItem} de 'react-native-elements'
importer {Messages} de '../constants/Messages'
La classe MessagesScreen étend React.Component {
render () {
revenir (
{Messages.map ((user, i) => (
)
}
}
const styles = StyleSheet.create ({
Titre: {
fontSize: 24,
couleur: '# 3F3F3F',
},
Sous-titre: {
couleur: '# A5A5A5',
},
})
exporter par défaut MessagesScreen
Nous prenons les données factices Messages nous les cartographions et les plaçons dans un ListItem exporté à partir de react-native-elements . Le composant ListItem affiche une liste d'éléments l'un après l'autre, comme nous le voyons sur toutes les applications de messagerie, avec un grand avatar, le nom de l'utilisateur et le message. react-native-elements simplifie l'écriture de notre propre liste de messages afin que nous puissions utiliser cinq lignes de code pour en faire une belle liste.
Il ressemble actuellement à ceci: [19659003] 
Écran du profil
Créez l'écran final du profil
Créez d'abord un fichier utils / randomNo.js et collez-le comme suit:
export const randomNo = (min, max) =>
Math.floor (Math.random () * (max - min) + min)
La fonction randomNo renvoie un nombre aléatoire compris entre min et max .
Ouvrez maintenant composants / ProfileScreen.js et collez ce qui suit:
import Réagissez à partir de 'réagir'
importer {Image, SafeAreaView, StyleSheet, View} à partir de 'react-native'
importer {Séparateur, Icône, Texte} à partir de 'réagir-éléments-natifs'
importer une mise en page à partir de '../constants/Layout'
importer {HomeScreenPics} de '../constants/Pics'
import {randomNo} de '../utils/randomNo'
const {pic, title} = AccueilScreenPics [randomNo(1, HomeScreenPics.length)]
const Social = ({name}) => (
{titre}
Styliste chez Amelia & Co.
J'aime voyager. J'ai un chat nommé cornichons. S'il t'aime bien, je
sera probablement aussi.
Retrouvez-moi sur Social ici
)
}
}
const styles = StyleSheet.create ({
récipient: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
marge: 20,
},
image: {
width: Layout.window.width - 60, // largeur du périphérique - quelques marges
height: Layout.window.height / 2 - 60, // hauteur du périphérique / 2 - une marge
borderRadius: 20,
},
Nom: {
couleur: '# 5E5E5E',
alignSelf: 'flex-start',
margeLeft: 30,
},
desc: {
couleur: '# 5E5E5E',
alignSelf: 'flex-start',
marginTop: 5,
marginHorizontal: 30,
fontSize: 14,
},
diviseur: {
backgroundColor: '# C0C0C0',
width: Layout.window.width - 60,
marge: 20,
},
Liens sociaux: {
flex: 1,
alignItems: 'flex-start',
flexDirection: 'rangée',
width: Layout.window.width,
margeLeft: 40,
},
iconContainer: {
paddingHorizontal: 8,
paddingVertical: 15,
},
})
exporter ProfileScreen par défaut
Décryptons un peu le code.
Tout d'abord, nous obtenons un tableau aléatoire pic et du tableau HomeScreenPics qui n'est pas le premier. image mais peut être n'importe quel reste des images de ce tableau.
Ensuite, nous avons créé un composant Social ressemblant à ceci:
const Social = ({name}) => (
Cela prend un nom comme accessoire. Nous l'utilisons dans notre méthode render . La méthode render contient le composant SafeAreaView habituel View et notre composant personnalisé Social - avec un un peu de style que nous avons déjà vu plus haut.
Le seul composant unique ici est un composant Divider . Les séparateurs sont des séparateurs visuels de contenu. Nous les utilisons pour distinguer différentes sections de contenu.
Enfin, nous ajoutons du style.
Cela ressemble actuellement à ceci:
J’ai également fait un repo, au cas où vous voudriez le cloner. Vous pouvez le trouver ici sur GitHub.
Conclusion
Nous avons réussi à cloner une interface utilisateur Tinder avec un style personnalisé et l'aide importante de React Native Elements.
React Native Elements élimine tous les problèmes liés à la création d'une belle interface utilisateur en utilisant sa bibliothèque de composants prédéfinis.
Nous pourrions également tout créer à partir de rien, sans utiliser aucune bibliothèque d'interface utilisateur, mais cela nous obligerait à écrire beaucoup de code. - surtout le style. En utilisant une bibliothèque d'interface utilisateur, nous pouvons écrire moins de code et livrer notre application plus rapidement.
Vous pouvez maintenant imiter n'importe quelle interface utilisateur en prenant la plus petite partie de l'interface utilisateur et en la construisant. Utilisez des frameworks d'interface utilisateur pour écrire moins de code et expédier plus rapidement.
Akshay est un créateur, artiste informatique et micropreneur de Mumbai.
Source link