Installere og konfigurere React Navigation
Installer React Navigation og avhengighetene, pakk appen inn i en NavigationContainer og sett opp din første stack-navigator med to skjermer.
Installere og konfigurere React Navigation er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva er React Navigation?
React Navigation er det mest populære biblioteket for å håndtere navigering i React Native-apper. Det tilbyr et sett med navigatører — Stack, Tab og Drawer — som lar deg gå mellom skjermer, sende data og administrere navigeringshistorikken. React Navigation er JavaScript-basert og fungerer sømløst med Expo og bare React Native-prosjekter.
Installere kjerneavhengigheter
React Navigation krever kjernepakken i tillegg til et sett med native avhengigheter. Kjør installasjonskommandoen, og installer deretter den native stack-navigatøren samt de nødvendige bibliotekene for berøringsbevegelser og animasjoner.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextInstallere den native stack-navigatøren
Den native stack-navigatøren fra @react-navigation/native-stack bruker native navigasjonskomponenter for iOS og Android. Det gir bedre ytelse og en mer naturlig plattformopplevelse enn en stack som bare bruker JS. Installer den sammen med kjernepakken.
npm install @react-navigation/native-stackPakke inn appen i NavigationContainer
Alle React Navigation-oppsett krever at NavigationContainer er rotkomponenten i appen. Den administrerer navigasjonstreet, håndterer tilbakeknappen på Android og gir alle underordnede komponenter tilgang til navigasjonskonteksten. Pakk inn hele appen i den i App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Opprette en stack-navigatør
Bruk createNativeStackNavigator() for å opprette en stack-navigatør. Funksjonen returnerer en Navigator- og en Screen-komponent. Legg Stack.Screen-komponenter inni Stack.Navigator for å registrere skjermene dine.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
);
}Prop-en initialRouteName
Som standard er den første skjermen som er oppført i Stack.Navigator, startskjermen. Du kan angi eksplisitt hvilken skjerm som skal vises først, ved å bruke initialRouteName-prop-en på Stack.Navigator. Verdien må samsvare med name for ett av underobjektene Stack.Screen.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Opprette enkle skjermkomponenter
Hver skjerm som registreres i navigatøren, er en vanlig React-komponent. React Navigation setter automatisk inn prop-ene navigation og route i hver registrerte skjermkomponent. Du kan bruke disse prop-ene til å navigere eller lese ruteparametere.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}Sette alt sammen
Når du kombinerer NavigationContainer, stack-navigatøren og skjermkomponentene dine, får du en fungerende app med to skjermer. Den første registrerte skjermen blir synlig når appen starter. React Navigation håndterer tilbakeknappen og navigasjonsfeltet automatisk.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}Tilpasse tittelen i navigasjonsfeltet
Hver Stack.Screen støtter en options-prop der du kan tilpasse navigasjonsfeltet. Angi title for å overstyre standardnavnet på skjermen som vises i navigasjonsfeltet. Du kan også angi headerShown: false for å skjule navigasjonsfeltet helt.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Skjermalternativer på navigatøren
Angi screenOptions på Stack.Navigator for å bruke standardalternativer på alle skjermer. Den enkelte skjermens options overstyrer standardalternativene på navigatøren. Dermed slipper du å gjenta vanlige innstillinger som headerStyle eller headerTintColor på hver skjerm.
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#6200ee' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Kontrollere oppsettet
Kjør npx expo start og åpne appen. Du skal se Home-skjermen med et navigasjonsfelt. På iOS vises tilbakeknappen automatisk når du navigerer til Details. På Android håndteres maskinvareknappen for tilbake av React Navigation. Hvis appen krasjer, må du kontrollere at react-native-screens og react-native-safe-area-context er installert.
Hurtigsjekk
Test forståelsen din av konseptene for oppsett av React Navigation fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte du å installere React Navigation-kjernepakken og native-stack-pakken, pakke inn appen i NavigationContainer og definere skjermer i Stack.Navigator med Stack.Screen. Neste gang utforsker vi navigering mellom skjermer og sending av parametere.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Installere og konfigurere React Navigation» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Installere og konfigurere React Navigation», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Installere og konfigurere React Navigation»?
Installer React Navigation og avhengighetene, pakk appen inn i en NavigationContainer og sett opp din første stack-navigator med to skjermer. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Installere og konfigurere React Navigation»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Installere og konfigurere React Navigation
- Navigere mellom skjermer og sende parametere
- Navigering med faner nederst
- Drawer-navigatorer og nøstede navigatorer