Passons au Tab Navigator, qui facilite le passage entre les écrans ou les onglets. Il est généralement situé en bas de l'écran.

Tout d'abord, si ce n'est pas déjà fait, assurez-vous d'avoir installé React Navigation :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input
        type="text"
        class="text-field"
        id="widget1-text"
        value="npm install @react-navigation/native @react-navigation/bottom-tabs"
      />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Maintenant, créons trois écrans : `HomeScreen`, `ProfileScreen`, et `SettingsScreen`.

Maintenant, configurons la navigation dans notre `App.js` en utilisant le Tab Navigator :

Dans cet exemple, nous avons configuré la navigation en utilisant le Tab Navigator dans `App.js`. Chaque écran est ajouté comme un onglet séparé dans le Tab Navigator. Nous pouvons passer d'un écran à l'autre en appuyant sur l'onglet correspondant en bas de l'écran.

## Analysons chaque composant individuellement

### Étape 1
`import `Statements: Les modules nécessaires de React et React Navigation sont importés, ainsi que les composants d'écran personnalisés (`HomeScreen`, `ProfileScreen`, et `SettingsScreen`).

### Étape 2
En utilisant `createBottomTabNavigator()`, un navigateur à onglets est créé.

### Étape 3
Définir le composant `App` : Le composant `App` rend le conteneur de navigation et le navigateur à onglets.


### Étape 4
Le composant `NavigationContainer` enveloppe toute la structure de navigation.

### Étape 5
À l'intérieur du `NavigationContainer`, le composant `Tab.Navigator` définit la structure de navigation par onglets.

### Étape 6
Les composants `Tab.Screen` sont ajoutés au navigateur par onglets. Chaque écran a un nom unique et est associé à un composant.

Explorez le monde du développement d'applications mobiles avec React Native. Apprenez les concepts fondamentaux et les techniques avancées pour créer efficacement des applications mobiles multiplateformes.

L'introduction complète à React Native décrit les prérequis et les objectifs du cours et offre des conseils sur les pratiques d'apprentissage efficaces. Comprenez ce à quoi vous attendre du cours et comment aborder efficacement le parcours d'apprentissage.

Explorez les concepts fondamentaux de React Native, de la configuration de l'environnement de développement à la compréhension des composants React Native. Acquérez une expérience pratique en construisant une application simple et en posant les bases pour des projets plus complexes.

Apprenez la gestion efficace des états dynamiques, des props, de la navigation et des hooks pour créer des applications React Native soignées.

Explorez les aspects avancés du développement React Native, en couvrant des sujets cruciaux tels que la gestion des entrées, la barre d'état, les ActivityIndicators, et plus encore. Plongez profondément dans des techniques pratiques pour construire des applications mobiles sophistiquées.

Fondations de React Native

Navigateur à Onglets

Analysons chaque composant individuellement

Étape 1

Étape 2

Étape 3

Étape 4

Étape 5

Étape 6