Innføring

React Native gjør det mulig å bygge innfødte mobilapper med JavaScript og React. Et kritisk aspekt av mobilapputviklingen er navigasjon: guide brukere gjennom ulike skjermer og funksjoner sømløst. React Navigation er det mest populære, samfunnsdrevet biblioteket for å implementere navigasjon i React Native programmer. Den gir et deklarativt API, støtter stabel, fane og skuffe navigatører, og håndtere plattformspesifikke bevegelser og overganger. Denne guiden dekker alt fra installasjon til avanserte mønstre som dype koblings- og autentiseringsstrømmer.

Forutsetninger og installasjon

Før du bruker React Navigation, forsikre deg om du har et React Native-prosjekt som starter. Hvis du starter frisk, bruk React Native CLI eller Expo. React Navigation fungerer med begge.

Installer kjernepakker

Installere de nødvendige pakkene via npm eller garn. Kjernebiblioteket og dets viktigste avhengigheter er:

npm install @react-navigation/native

Deretter installerer du de støttebibliotekene som React Navigation avhenger av for skjermhåndtering og sikker områdehåndtering:

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

Hvis du bruker Expo, er disse bibliotekene allerede inkludert. For bare React Native-prosjekter, følg lenkeinstruksjonene i den offisielle dokumentasjonen for å sikre at innfødte moduler er koblet riktig (automatisk linking håndterer dette for React Native 0.60+).

Installer en navigatør

React Navigation tilbyr flere navigatører. native stabel navigatør anbefales for de fleste brukstilfeller:

npm install @react-navigation/native-stack

Andre navigatører som nederste faner og trekker] er installert separat:

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

Kjernekonsepter

React Navigation er bygget rundt tre hovedbygningsblokker:

  • NavigationContainer ⁇ den ytterste wrapper som styrer navigasjonstreet og staten.
  • Navigatorer ⁇ komponenter som definerer navigasjonsmønsteret (stack, fane, skuffe).
  • Skjerm ⁇ individuelle komponenter som representerer en visning eller siden i appen.

Alle navigeringsoppsett må pakkes inn i en . Denne beholderen plasseres vanligvis i roten til appkomponenten.

Sette opp en Stack Navigator

Stakken navigatøren administrerer en siste-in-first-out stabel av skjermer. Den bruker den opprinnelige plattformens overgang animasjoner og bevegelser som standard.

For det første importerer nødvendige moduler:

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

Opprett en stabel navigatørinstans:

const Stack = createNativeStackNavigator();

Definer navigatøren i app-komponenten din:

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

Hver krever en prop (brukt til navigasjon) og en prop (React komponent å gjøre).

Opprette skjermer og navigere

Skjermer er standard reaktkomponenter. De mottar to viktige props: og . Objektet gir metoder for å bevege seg mellom skjermer. Nedenfor er en typisk hjemmeskjerm:

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

Detaljer-skjermen trenger ikke å bruke navigasjonspropen med mindre den trenger å navigere videre.

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

React Navigation gir flere metoder via prop:

  • navigate(navn, params)] ⁇ flytter til en skjerm, og gjenbruker en eksisterende instans hvis den eksisterer i stabelen.
  • push(navn, params)] - alltid skyver en ny skjerm på stabelen, selv om den samme skjermen allerede er i stabelen.
  • goBack()] ⁇ navigerer til forrige skjerm i stabelen.
  • replace(navn, params) ⁇ erstatter den gjeldende skjermen med en ny, fjerner den aktuelle fra historien.
  • reset(state) ⁇ tilbakestiller hele navigasjonstilstanden til et gitt tilstandsobjekt.

For eksempel, å trykke på en ny forekomst av detaljer-skjermen og passerparametrene:

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

Passerer parametre mellom skjermer

Data kan overføres til en skjerm via det andre argumentet til eller . Den mottakende skjermen får tilgang til disse parametrene gjennom .

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

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

Sett standardparameterverdier ved hjelp av [[FLT: 22]] på skjermkomponenten:

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

Konfigurere navigasjonsalternativer

Hver skjerm kan tilpasse sitt hode, faneikon, skuffemerke osv., ved å bruke prop på eller prop på navigatøren.

Tilpassing av overskrift

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

Dynamiske alternativer kan settes ved hjelp av en funksjon som mottar :

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

Fane Navigator

Tab-navigasjon er vanlig for app-seksjoner på toppnivå. Installer den nederste fanene navigatør:

npm install @react-navigation/bottom-tabs

Opprett en fane navigatør og kombinere den med stabelen din:

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

Du kan reire fane navigatøren inne i en stabel navigatør eller omvendt. Tilpass faneikonene ved hjelp av prop med .

Drawer Navigator

En skuff navigatør lyser en skuff fra venstre, avslører navigasjonselementer. Installer den:

npm install @react-navigation/drawer

Eksempeloppsett:

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

Bruk til å åpne og lukke skuffen programmatisk.

Komplekse apper reir navigatører (f.eks. en fane navigatør inne i en stabel navigatør). React Navigasjon håndterer reiring gracelyly. prop som er gitt til enhver skjerm kan ringe metoder på en forelder navigatør om nødvendig. Bruk til å få tilgang til forelderens navigatør metoder.

Eksempel: En stabel som inneholder en fanenavigator og en innstillingsskjerm:

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

Linking og dyp linking

React Navigation støtter dyp kobling til å håndtere URL-adresser som åpner bestemte skjermer. Konfigurer [FLT: 40] prop på [[FLT: 41]]:

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

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

Deretter håndterer innkommende URL-adresser. Dette gjør det mulig å trykke på varsler som lenker til en bestemt skjerm.

Autentiseringsflyter

Mange apper krever betinget navigasjon basert på autentiseringstilstand. Et vanlig mønster er å bytte navigatøren på rotnivå:

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

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

Alternativt kan du bruke en enkelt stabel med betinget skjermer. Unngå flimmer ved å holde løftet eller oppgi dato.

Ytelse og beste praksis

  • Bruk native stabel navigatør (ikke ]) for bedre ytelse og innfødte overganger.
  • Minimer antall skjermer montert på én gang. React Navigation avmonterer skjulte skjermer som standard for stabel navigatører, men for tab navigatører kan du konfigurere lat lasting.
  • Passer bare primitive data gjennom parametre for å unngå seriealiseringsproblemer.
  • Bruk eller for skjermkomponenter som ofte gjenvinner.
  • Unngå tunge beregninger under navigasjon overganger; offload arbeid med .
  • Hanter alltid hendelsen for ulagne endringer spør.

Konklusjon

React Navigation gir en intuitiv, tilpasset og performant måte å administrere navigasjon på i React Native apps. Ved å mastere stabel, fane, skuffe og reired navigatører, sammen med parameter passerer, dype lenker og autentiseringsstrømmer, kan du bygge robuste mobile opplevelser. For ytterligere detaljer, referere til offisiell React Navigasjonsdokumentasjon og React Native Navigation guide]. Også vurdere å lese samfunnsartikler på React Navigation beste praksis] for å forfine implementeringene dine.