Een volledige gids voor het reacteren van Native Navigation met behulp van react Navigation

Inleiding

React Native maakt het mogelijk om native mobiele apps te bouwen met JavaScript en React. Een cruciaal aspect van mobiele app ontwikkeling is navigatie: het begeleiden van gebruikers door verschillende schermen en functies naadloos. [React Navigation is de meest populaire, community-gedreven bibliotheek voor het implementeren van navigatie in React Native toepassingen. Het biedt een verklaringvolle API, ondersteunt stack, tab en lade navigators, en behandelt platformspecifieke gebaren en overgangen. Deze gids behandelt alles van installatie tot geavanceerde patronen zoals diepe koppeling en authenticatiestromen.

Vereisten en installatie

Voordat u React Navigatie gebruikt, zorg ervoor dat u een React Native project geïnitialiseerd. Als u opnieuw begint, gebruik dan de React Native CLI of Expo. Navigatie werkt met beide.

Core pakketten installeren

Installeer de vereiste pakketten via npm of garen. De kernbibliotheek en de belangrijkste afhankelijkheden zijn:

npm install @react-navigation/native

Installeer vervolgens de ondersteunende bibliotheken waarop Navigatie is gebaseerd voor schermbeheer en veilige verwerking van gebieden:

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

Als u Expo gebruikt, zijn deze bibliotheken al opgenomen. Volg voor kale React Native projecten de linking instructies in de officiële documentatie om ervoor te zorgen dat de native modules correct zijn gekoppeld (autolinking behandelt dit voor React Native 0.60+).

Een navigatie-installatie installeren

React Navigation biedt meerdere navigators. De native stack navigator wordt aanbevolen voor de meeste gebruiks gevallen:

npm install @react-navigation/native-stack

Andere navigatoren zoals onderste tabbladen en -lade worden afzonderlijk geïnstalleerd:

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

Kernbegrippen

React Navigation is gebouwd rond drie hoofdbouwstenen:

• Navigatiecontainer . . . de buitenste wikkel die de navigatieboom en -toestand beheert.
• Navigatoren .. componenten die het navigatiepatroon definiëren (stack, tab, lade).
• Screens .. individuele componenten die een weergave of pagina in de app vertegenwoordigen.

Elke navigatie-opstelling moet worden verpakt in een . Deze container wordt meestal geplaatst aan de wortel van de app component.

Een Stack Navigator instellen

De stack navigator beheert een last-in-first-out stapel van schermen. Het maakt gebruik van de native platform .

Ten eerste, de benodigde modules importeren:

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

Een stack navigator-initiatie aanmaken:

const Stack = createNativeStackNavigator();

Definieer de navigator in uw App-component:

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

De maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale maximale

Schermen aanmaken en navigeren

Schermen zijn standaard React componenten. Ze ontvangen twee belangrijke rekwisieten: en . Het object geeft methoden om tussen schermen te bewegen. Hieronder staat een typisch Startscherm:

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>
 );
}

Het Details scherm hoeft niet te gebruiken de navigatie prop tenzij het moet verder navigeren.

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

Navigatiemethoden

React Navigation biedt verschillende methoden via de prop:

• navigeren(naam, params)
• push(naam, params)
• goBack()
• vervangen(naam, params)
• reset(state)

Bijvoorbeeld, om een nieuwe instantie van het Details scherm te pushen en parameters door te geven:

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

Parameters tussen scherm doorgeven

De gegevens kunnen via het tweede argument naar een scherm worden doorgegeven aan of . Het ontvangend scherm opent deze parameters via .

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

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

Stel standaard parameterwaarden in met op het schermcomponent:

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

Navigatie-opties instellen

Elk scherm kan zijn kop, tabpictogram, ladelabel, enz. aanpassen met behulp van de prop op of de prop op de navigator.

Aanpassen van kop

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

Dynamische opties kunnen worden ingesteld met behulp van een functie die ontvangt:

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

Tabnavigator

Tab navigatie is gebruikelijk voor top-level app secties. Installeer de onderste tabbladen navigator:

npm install @react-navigation/bottom-tabs

Maak een tabnavigator aan en combineer deze met je stack:

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>
 );
}

U kunt de tabnavigator in een stack navigator nestelen of vice versa. Pas tabken aan met behulp van de prop met .

Ladenavigator

Een ladekie schuift een lade van links, onthullen navigatie-items. Installeer het:

npm install @react-navigation/drawer

Voorbeeldinstellingen:

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>
 );
}

Gebruik om de lade programmatisch te openen en te sluiten.

Genesteerde navigatoren

Complexe apps nesten vaak navigators (bijvoorbeeld een tabnavigator in een stack navigator). React Navigatie behandelt sierlijk nestelen. De prop die aan elk scherm wordt geleverd, kan methoden oproepen op een oudernavigator indien nodig. Gebruik om toegang te krijgen tot de oudernavigatormethoden.

Voorbeeld: Een stapel met een tabnavigator en een instellingenscherm:

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

Koppeling en diepe koppeling

React Navigation ondersteunt diepe koppeling om URL's te verwerken die specifieke schermen openen. Configureer de prop op :

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

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

Behandel vervolgens binnenkomende URL's. Hiermee kunt u functies zoals pushmeldingen koppelen aan een specifiek scherm.

Authenticatiestromen

Veel apps vereisen voorwaardelijke navigatie op basis van de authenticatiestatus. Een gemeenschappelijk patroon is om de navigator op het rootniveau te schakelen:

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

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

Als alternatief, gebruik een enkele stack met voorwaardelijke schermen. Vermijd flikkeren door de belofte te houden of status up-to-date.

Prestaties en beste praktijken

• Gebruik native stack navigator (niet ) voor betere prestaties en inheemse overgangen.
• Minimaliseer het aantal schermen dat tegelijk is aangekoppeld. Reageer Navigatie unmounts verborgen schermen standaard voor stack navigators, maar voor tabnavigators, kunt u luie laden configureren.
• Geef alleen primitieve gegevens door aan parameters om serialisatieproblemen te voorkomen.
• Gebruik of voor schermcomponenten die vaak opnieuw renderen.
• Vermijd zware berekeningen tijdens navigatietransitie; uitladen met .
• Behandel altijd de gebeurtenis voor niet-opgeslagen wijzigingenprompts.

Conclusie

React Navigation biedt een intuïtieve, aanpasbare en performante manier om navigatie te beheren in React Native-apps. Door stack, tab, lade en geneste navigators te beheersen, samen met parameter passeren, diep koppelen en authenticatiestromen, kunt u robuuste mobiele ervaringen opbouwen. Voor meer details, verwijzen naar de officiële React Navigation documentatie en de React Native Navigation guide[. Overweeg ook om community artikelen te lezen over React Navigation best practices[ om uw implementaties te verfijnen.