React Native Academy · Lektion

Konfiguration af deep links i React Navigation

Konfigurér linking-proppen på NavigationContainer med et skærmkort, så React Navigation automatisk navigerer til den korrekte skærm, når et deep link åbnes.

Lektion 3 af 413 trin

Konfiguration af deep links i React Navigation er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Indbygget deep linking i React Navigation

React Navigation har indbygget understøttelse af deep linking via en linking-prop på NavigationContainer. Når det er konfigureret, håndterer React Navigation automatisk både URL'er ved kold opstart og ved en allerede kørende app ved at analysere dem i forhold til et skærmkort og navigere til den tilsvarende skærm — du behøver ikke selv at skrive kode til URL-analyse eller Linking API.

Denne deklarative tilgang giver langt færre fejl end manuel håndtering af URL'er og integreres problemfrit med navigationsbibliotekets tilstandshåndtering.

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

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:userId',
      Settings: 'settings',
    },
  },
};

<NavigationContainer linking={linking}>
  <RootNavigator />
</NavigationContainer>

linking-proppen: prefixes og config

linking-proppen har to hovedfelter: prefixes (et array med URL-præfikser, der skal håndteres) og config (skærmkortet). Arrayet prefixes fortæller React Navigation, hvilke URL-skemaer der skal opfanges. Du kan inkludere både dit brugerdefinerede skema og dit HTTPS-domæne til universelle links.

Objektet config.screens knytter skærmkomponenternes navne til URL-stimønstre. URL-stien efter præfikset sammenlignes med disse mønstre for at afgøre, hvilken skærm der skal navigeres til.

const linking = {
  prefixes: [
    'myapp://',
    'https://www.myapp.com',  // universal links too
    'https://myapp.com',
  ],
  config: {
    screens: {
      Home: '',           // matches myapp:// (empty path)
      Profile: 'profile/:userId',   // myapp://profile/123
      Product: 'product/:id',        // myapp://product/abc
      Settings: 'settings',          // myapp://settings
    },
  },
};

Stiparametre og forespørgselsstrenge

URL-stiparametre defineres med et kolon som præfiks, f.eks. :userId. Når en URL matcher, udtrækkes parameteren automatisk og sendes som en ruteparameter til skærmkomponenten. Parametre i forespørgselsstrengen analyseres også automatisk og føjes til ruteparametrene.

For eksempel matcher myapp://profile/123?tab=posts profile/:userId, og skærmen modtager route.params = { userId: '123', tab: 'posts' }. Det er ikke nødvendigt at analysere URL'en manuelt.

// URL: myapp://profile/123?tab=posts
// Matches: profile/:userId
// Screen receives:
// route.params = { userId: '123', tab: 'posts' }

function ProfileScreen({ route }) {
  const { userId, tab } = route.params;
  // userId = '123', tab = 'posts'
}

Konfiguration af indlejrede navigationskomponenter

Når skærme ligger i indlejrede navigationskomponenter (f.eks. en fanenavigationskomponent med stacks i hver fane), skal skærmkortet afspejle indlejringsstrukturen. Brug en screens-nøgle i den overordnede skærms config til at definere stier til indlejrede skærme.

React Navigation håndterer navigationstilstanden korrekt — den opretter hele den nødvendige stack for at nå den dybt indlejrede skærm, herunder eventuelle overordnede navigationskomponenter, der først skal initialiseres.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Tabs: {                    // bottom tab navigator
        screens: {
          HomeTab: {             // home tab stack
            screens: {
              Home: 'home',
              PostDetail: 'post/:postId',
            },
          },
          ProfileTab: {          // profile tab stack
            screens: {
              Profile: 'profile/:userId',
            },
          },
        },
      },
    },
  },
};

Eksakt stisammenligning

Som standard bruger React Navigation præfiksbaseret sammenligning af stier. Føj exact: true til en skærms config for i stedet at kræve et eksakt stiematch. Eksakt sammenligning er vigtig, når stier delvist kan matche flere skærme.

Uden eksakt sammenligning ville mønsteret post f.eks. matche myapp://post og også myapp://post-list. Med exact: true matcher kun den præcise sti.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      PostList: {
        path: 'post',
        exact: true,  // only matches exactly myapp://post
      },
      PostDetail: 'post/:id', // matches myapp://post/123
    },
  },
};

Brugerdefinerede parse- og stringify-funktioner

Linking-konfigurationen accepterer også funktionerne parse og stringify for hver skærm, så ruteparametre kan omdannes, før de sendes til komponenten. parse konverterer URL-parameterstrenge til de korrekte typer (f.eks. strengen '123' til tallet 123). stringify konverterer parametre tilbage til URL-strenge, når links genereres.

Disse funktioner giver dig fuld kontrol over omdannelsen af parametre, uden at du selv behøver implementere URL-analyse.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Profile: {
        path: 'profile/:userId',
        parse: {
          userId: (id) => Number(id),  // string to number
        },
        stringify: {
          userId: (id) => String(id),  // number back to string
        },
      },
    },
  },
};

getPathFromState og getStateFromPath

React Navigation har hjælpefunktionerne getPathFromState og getStateFromPath, som konverterer mellem objekter med navigationstilstand og URL-stier. De er nyttige til at generere delbare deep links ud fra den aktuelle navigationstilstand og til brugerdefineret gendannelse af tilstand.

getPathFromState(state, config) returnerer en URL-sti for den aktuelle navigationstilstand. getStateFromPath(path, config) returnerer en navigationstilstand for en given URL. Begge kræver det samme config-objekt, som bruges i linking-proppen.

import { getPathFromState, getStateFromPath } from '@react-navigation/native';

// Generate a shareable link for the current screen:
const currentState = navigationRef.current.getRootState();
const path = getPathFromState(currentState, linking.config);
const shareUrl = 'myapp://' + path;
// shareUrl = 'myapp://profile/123'

// Parse a URL to a navigation state:
const state = getStateFromPath('profile/123', linking.config);
// state = { routes: [{ name: 'Profile', params: { userId: '123' } }] }

Aktivering af deep links i Expo (Expo Go)

Når du kører i Expo Go under udvikling, bruger din apps deep link-URL skemaet exp:// sammen med Expo Go-værten. React Navigation håndterer dette automatisk, når du inkluderer Linking.createURL('') i arrayet prefixes (ved hjælp af pakken expo-linking), som finder det korrekte præfiks for både Expo Go og produktionsbuilds.

Det betyder, at din deep link-konfiguration fungerer både i udvikling (Expo Go) og i produktion (din apps brugerdefinerede skema) uden ændringer i konfigurationen.

import * as ExpoLinking from 'expo-linking';

const linking = {
  prefixes: [
    ExpoLinking.createURL('/'), // works in Expo Go AND production
    'myapp://',
    'https://www.myapp.com',
  ],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:userId',
    },
  },
};

Programmatisk generering af deep links

Brug Linking.createURL(path, options) fra expo-linking til at generere deep link-URL'er, der fungerer både i udvikling og produktion. Angiv forespørgselsparametre i indstillingen queryParams. Brug de genererede URL'er i notifikationer, deleark og e-mailkampagner.

Denne tilgang er sikrere end at hardkode skema-URL'er, fordi createURL automatisk opretter det korrekte præfiks for det aktuelle runtime-miljø.

import * as ExpoLinking from 'expo-linking';

// Generate a profile deep link:
const profileLink = ExpoLinking.createURL('profile/123', {
  queryParams: { tab: 'posts', source: 'share_button' },
});
// In production: 'myapp://profile/123?tab=posts&source=share_button'
// In Expo Go: 'exp://127.0.0.1:19000/--/profile/123?tab=posts...'

await Share.share({ url: profileLink });

Test af linking-konfigurationen

React Navigation har et fejlfindingsværktøj til linking — angiv linking.enabled: 'auto', så biblioteket logger resultaterne af URL-sammenligningen til konsollen under udvikling. Det hjælper med at finde årsagen til, at en URL ikke navigerer til den forventede skærm.

Skriv en testfunktion, der kalder getStateFromPath med hver af dine forventede deep link-URL'er, og kontrollér, at den resulterende navigationstilstand er korrekt, for at teste grundigt. På den måde opdager du konfigurationsfejl, før de når ud til brugerne.

// Test your linking config:
import { getStateFromPath } from '@react-navigation/native';

const testCases = [
  { url: 'profile/123', expected: 'Profile' },
  { url: 'product/abc', expected: 'Product' },
  { url: 'settings', expected: 'Settings' },
];

testCases.forEach(({ url, expected }) => {
  const state = getStateFromPath(url, linking.config);
  const routeName = state.routes[0].name;
  console.assert(routeName === expected, 'Mismatch for ' + url);
});

Ikke fundet-skærm til ugyldige links

Konfigurer en fallback-skærm til URL'er, der ikke matcher noget defineret mønster. Føj en NotFound-skærm til linking-konfigurationen, og angiv den som fallback. Det er vigtigt, fordi deep links fra tredjeparter kan bruge forkerte stier, og du bør vise en nyttig meddelelse på en ordentlig måde i stedet for at få appen til at gå ned eller mislykkes uden forklaring.

Ikke fundet-skærmen bør forklare, at linket ikke længere er gyldigt, give mulighed for at navigere til startskærmen og eventuelt logge den ugyldige URL til analyse.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:userId',
      NotFound: '*',  // catch-all for unmatched paths
    },
  },
};

function NotFoundScreen() {
  const navigation = useNavigation();
  return (
    <View>
      <Text>This link is no longer valid.</Text>
      <Button
        title='Go Home'
        onPress={() => navigation.replace('Home')}
      />
    </View>
  );
}

Hurtigt tjek

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: linking-proppen på NavigationContainer automatisk håndterer analyse af deep links og navigation ved hjælp af et deklarativt skærmkort, indlejrede navigationskomponenter understøttes ved at indlejre skærmkonfigurationer i de overordnede skærmkonfigurationer, og ExpoLinking.createURL genererer miljøbevidste deep links, der fungerer både i Expo Go og i produktionsbuilds. Som det næste konfigurerer vi universelle links ved hjælp af HTTPS-URL'er med Apple App Site Association og Android App Links.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Konfiguration af deep links i React Navigation” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Konfiguration af deep links i React Navigation”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Konfiguration af deep links i React Navigation”?

Konfigurér linking-proppen på NavigationContainer med et skærmkort, så React Navigation automatisk navigerer til den korrekte skærm, når et deep link åbnes. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Konfiguration af deep links i React Navigation”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Konfiguration af brugerdefinerede URL-skemaer
Linking-API og URL-parsing
Konfiguration af deep links i React Navigation
Universal Links (HTTPS-deep links) på iOS og Android

← Tilbage til React Native Academy