React Navigation 5, nouvelle Navigation en Vue !

React Native

Avec la mise à jour de react-navigation, la mise en place d’un système de navigation dans un projet React change. Nous allons donc voir avec cette exemple simple, comment mettre en place un Drawer, utilisé généralement pour les menus latéraux.

Le Snack est disponible ici :
https://snack.expo.io/@oktopod/oktopod-demo-react-navigation-avec-drawer

Première étape, une fois votre projet React Native initialisé, CRNA ou Expo, installez la librairie react-navigation avec les commandes suivantes

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Nous allons ensuite modifier le fichier App.js ou index.js de l’application, dans lequel nous allons ajouter un composant NavigationContainer.

La propriété initialRouteName va permettre de définir notre Affichage par défault.

Notre objectif est de créer une navigation entre deux écrans, un Home et un About. Et ensuite de définir le composant que l’on souhaite afficher à l’ouverture de l’application.

import 'react-native-gesture-handler'; // !! important cf => https://facebook.github.io/react-native/docs/navigation
import * as React from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from './src/screens/HomeScreen';
import NotificationsScreen from './src/screens/AboutScreen';

const Drawer = createDrawerNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeScreen} />
                <Drawer.Screen name="Notifications" component={NotificationsScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

L’étape la plus compliquée est terminée, il vous reste maintenant à créer vos deux pages Home et About dans votre arborescence de projet.

// src/screens/HomeScreen.js
import * as React from 'react';
import { Button, View } from 'react-native';

export default function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
                onPress={() => navigation.navigate('About')}
                title="Afficher la page About"
            />
        </View>
    );
}
// src/screens/AboutScreen.js
import * as React from 'react';
import { Button, View } from 'react-native';

export default function Screen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
                onPress={() => navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        </View>
    );
}

La suite concernera le WebGL, et la librairie Three.js que l’on peut intégrer dans React Native avec quelques lignes de code.