React Native Expo Tutorial Temu Clone - Expo Router & Gluestack Ui Installation

Vous pouvez également regarder la vidéo sur YouTube :

React Native Expo Tutorial Temu Clone - Expo Router & Gluestack Ui Installation

Créer l'application Expo

npx create-expo-app@latest --template

``bash

Choisir un modèle ? >> Blanc (Typescript) Quel est le nom de votre application ? >> expo-temu

Supprimez le fichier package-lock.json et lancez la commande yarn Si vous souhaitez utiliser yarn.

Si vous n'avez pas encore installé yarn :

```bash
npm install --global yarn

yarn

Démarrez le projet avant d'installer quoi que ce soit pour vous assurer que tout fonctionne.

``bash yarn start

Appuyez sur le "a" pour Android ou le "i" pour iOs

### Installation d'Expo Router

```bash
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Ajouter le champ main à package.json

{
    "name" : "expo-ecommerce",
    "version" : "1.0.0",
    "main" : "expo-router/entry", // cette ligne

    // ... reste du fichier package.json
}

Ajouter le champ scheme à app.json

{
  "expo" : {
    "name" : "expo-ecommerce",
    "slug" : "expo-ecommerce",
    "scheme" : "expo-ecommerce", // cette ligne

    // ... reste du fichier app.json
  }
}

Redémarrez votre application :

``bash yarn start --clear

### Création de la structure du fichier Expo Router

Créons un dossier app pour expo router et un dossier (tabs) pour le navigateur d'onglets du bas.

Fichier `app/_layout.tsx` :

``js
import React from "react" ;
import { Stack } from "expo-router" ;
import { StatusBar } from "expo-status-bar" ;

const RootLayout = () => {
  return (
    <>
      <StatusBar style="auto" />

      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown : false }} />
      </Stack>
    </>
  ) ;
} ;

export default RootLayout ;

Fichier app/(tabs)/_layout.tsx :

``js import { Tabs } from "expo-router" ;

const TabLayout = () => { return ( <Tabs screenOptions={{ tabBarActiveTintColor : "blue" }}> <Tabs.Screen name="index" options={{ title : "Accueil", }} /> <Tabs.Screen name="panier" options={{ titre : "Panier", }} /> ) ; } ;

export default TabLayout ;

Fichier `app/(tabs)/index.tsx` :

``js
import { Text, View } from "react-native" ;

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  ) ;
} ;

export default HomeScreen ;

Fichier app/(tabs)/cart.tsx :

``js import { Text, View } from "react-native" ;

const CartScreen = () => { return ( CartScreen ) ; } ;

export default CartScreen ;

### Installation de l'interface utilisateur Gluestack (bibliothèque CSS Tailwind)

```bash
npx gluestack-ui init

``bash

Détection d'un projet Expo, continuer ? >> Oui

Procédez avec prudence. Assurez-vous de valider vos modifications avant de continuer. Continuer ? >> Oui

### Installation de Lucide Icons pour React Native

Tout d'abord, assurez-vous que vous avez installé react-native-svg (version entre 12 et 15). Ensuite, installez le paquet :

``bash
yarn add lucide-react-native

Installation des dépendances requises pour notre projet

npx gluestack-ui ajouter icône boîte de texte bouton carte en-tête hstack vstack image

Faisons quelques changements dans notre application pour utiliser l'interface utilisateur de Gluestack.

Fichier app/_layout.tsx :

``js import "@/global.css" ;

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider" ; import { Stack } from "expo-router" ; import { StatusBar } from "expo-status-bar" ;

const RootLayout = () => { return (

  <Stack>
    <Stack.Screen name="(tabs)" options={{ headerShown : false }} />
  </Stack>
</GluestackUIProvider>

) ; } ;

export default RootLayout ;

Fichier `app/(tabs)/_layout.tsx` :

``js
import { Icon } from "@/components/ui/icon" ;
import { Tabs } from "expo-router" ;
import { Home, ShoppingCart } from "lucide-react-native" ;

const TabLayout = () => {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor : "blue" }}>
      <Tabs.Screen
        name="index"
        options={{
          title : "Accueil",
          tabBarIcon : () => <Icon as={Home} />,
        }}
      />
      <Tabs.Screen
        name="cart"
        options={{
          titre : "Panier",
          tabBarIcon : () => <Icon as={ShoppingCart} />,
        }}
      />
    </Tabs>
  ) ;
} ;

export default TabLayout ;

C'est tout pour ce tutoriel, nous avons installé expo router et gluestack ui. Nous avons créé un navigateur d'onglets et notre application est maintenant prête à être construite.

Dans le prochain tutoriel, nous commencerons à construire l'écran de l'utilisateur.