Guide complet pour réagir à la navigation autochtone en utilisant la navigation réagissante

Présentation

React Native permet de construire des applications mobiles natives avec JavaScript et React. Un aspect critique du développement d'applications mobiles est la navigation : guider les utilisateurs à travers différents écrans et fonctionnalités sans heurt. La navigation est la bibliothèque communautaire la plus populaire pour la navigation dans les applications React Native. Elle fournit une API déclarative, supporte les navigateurs pile, onglet et tiroir, et gère les gestes et transitions spécifiques à la plate-forme.

Prérequis et installation

Avant d'utiliser React Navigation, assurez-vous que vous avez un projet React Native initialisé. Si vous commencez à être frais, utilisez la CLI ou Expo React Native.

Installer les paquets de base

Installez les paquets requis via npm ou fil. La bibliothèque centrale et ses principales dépendances sont:

npm install @react-navigation/native

Ensuite, installez les bibliothèques supportant React Navigation dépend de la gestion de l'écran et de la gestion de la zone de sécurité :

npm install react-native-screens react-native-safe-area-context

Si vous utilisez Expo, ces bibliothèques sont déjà incluses. Pour les projets nus React Native, suivez les instructions de liaison dans la documentation officielle pour s'assurer que les modules natifs sont correctement liés (la gestion automatique de cette option pour React Native 0,60+).

Installer un navigateur

La navigation de réact offre plusieurs navigateurs. Le navigateur natif de pile est recommandé pour la plupart des cas d'utilisation :

npm install @react-navigation/native-stack

Les autres navigateurs comme onglets de fond et drawer sont installés séparément:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Concepts fondamentaux

La navigation de réaction est construite autour de trois principaux éléments de construction:

NavigationContainer – l'enveloppe extérieure qui gère l'arbre de navigation et l'état.
Navigateurs – composants qui définissent le modèle de navigation (piste, onglet, tiroir).
Screens – composants individuels qui représentent une vue ou une page dans l'application.

Chaque configuration de navigation doit être enveloppée dans un . Ce conteneur est généralement placé à la racine du composant de l'application.

Configuration d'un navigateur de piles

Le navigateur de la pile gère une pile d'écrans de dernière entrée en premier. Il utilise la plate-forme native animations de transition et gestes par défaut.

Premièrement, importer les modules nécessaires:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Créer une instance de navigateur de pile :

const Stack = createNativeStackNavigator();

Définissez le navigateur dans votre composant App :

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Chaque nécessite un prop (utilisé pour la navigation) et un prop (le composant React à rendre).

Création d'écrans et navigation

Les écrans sont des composants de Réaction standard. Ils reçoivent deux accessoires importants: et . L'objet fournit des méthodes pour se déplacer entre les écrans.

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

L'écran Détails n'a pas besoin d'utiliser l'accessoire de navigation à moins qu'il n'ait besoin de naviguer plus loin.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Méthodes de navigation

La navigation réactive fournit plusieurs méthodes via l'acp :

navigate(name, params) – se déplace vers un écran, réutilisant une instance existante si elle existe dans la pile.
push(name, params) – pousse toujours un nouvel écran sur la pile, même si le même écran est déjà dans la pile.
goBack() – navigue vers l'écran précédent dans la pile.
replace(name, params) – remplace l'écran actuel par un nouvel écran, en supprimant le courant de l'historique.
reset(state) – réinitialise l'état de navigation entier à un objet d'état donné.

Par exemple, pour pousser une nouvelle instance de l'écran Détails et les paramètres de passage:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Passer les paramètres entre les écrans

Les données peuvent être transmises à un écran via le deuxième argument à ou . L'écran de réception accède à ces paramètres par .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Définir les valeurs de paramètre par défaut en utilisant sur le composant de l'écran :

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Configuration des options de navigation

Chaque écran peut personnaliser son en-tête, son icône d'onglet, son étiquette de tiroir, etc., en utilisant l'option sur ou sur le navigateur.

Personnalisation de l'en-tête

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Les options dynamiques peuvent être définies en utilisant une fonction qui reçoit :

options={({ route }) => ({ title: route.params.name })}

Navigateur d'onglets

La navigation des onglets est courante pour les sections d'applications de haut niveau. Installez le navigateur des onglets de bas :

npm install @react-navigation/bottom-tabs

Créez un navigateur d'onglets et combinez-le avec votre pile :

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Vous pouvez nicher le navigateur de l'onglet dans un navigateur de pile ou vice versa. Personnalisez les icônes de l'onglet en utilisant l'option avec .

Navigateur de tiroirs

Un navigateur de tiroir glisse un tiroir de gauche, révélant des éléments de navigation. Installez-le :

npm install @react-navigation/drawer

Exemple de configuration :

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

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Utilisez pour ouvrir et fermer le tiroir de façon programmatique.

Navigateurs en nid

Les applications complexes ne sont pas toujours des navigateurs (p. ex., un navigateur tabulant à l'intérieur d'un navigateur de pile). La navigation réactive gère la nidification avec grâce. L'accessoire fourni à n'importe quel écran peut appeler des méthodes sur un navigateur parent si nécessaire.

Exemple : Une pile contenant un navigateur d'onglets et un écran de paramètres :

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Liens profonds

React Navigation prend en charge le lien profond pour gérer les URLs qui ouvrent des écrans spécifiques. Configurez le prop sur :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Puis, gérer les URLs entrantes. Cela permet des fonctionnalités comme les notifications push qui se connectent à un écran spécifique.

Flux d'authentification

De nombreuses applications nécessitent une navigation conditionnelle basée sur l'état d'authentification. Un modèle commun est de changer le navigateur au niveau racine:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativement, utilisez une seule pile avec des écrans conditionnels. Évitez de s'enflammer en gardant la promesse ou l'état à jour.

Performance et pratiques exemplaires

Utiliser navigateur de pile native[ (pas ) pour de meilleures performances et transitions natives.
Minimisez le nombre d'écrans montés à la fois. Réaction Navigation démonte les écrans cachés par défaut pour les navigateurs de piles, mais pour les navigateurs d'onglets, vous pouvez configurer le chargement paresseux.
Ne passez que des données primitives par des paramètres pour éviter les problèmes de sérialisation.
Utilisez ou pour les composants d'écran qui re-rendent souvent.
Évitez les calculs lourds pendant les transitions de navigation; déchargez le travail avec .
Toujours gérer l'événement pour les appels de modifications non enregistrés.

Conclusion

React Navigation fournit une façon intuitive, personnalisable et performante de gérer la navigation dans les applications React Native. En maîtrisant les navigateurs pile, onglet, tiroir et imbriqué, ainsi que les flux de passage de paramètres, de liaison profonde et d'authentification, vous pouvez construire des expériences mobiles robustes. Pour plus de détails, reportez-vous à la documentation officielle de navigation de réaction et au Guide de navigation de réaction Native.