React Native Academy · leksjon

Konfigurere egendefinerte URL-skjemaer

Definer et egendefinert URL-skjema i app.json for Expo, test å åpne appen fra en terminal med xcrun openurl eller adb, og les den opprinnelige URL-en når appen starter.

Leksjon 1 av 413 trinn

Konfigurere egendefinerte URL-skjemaer 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 deep linking?

Deep linking gjør det mulig for eksterne URL-er – i e-poster, nettlesere, QR-koder eller andre apper – å åpne React Native-appen Deres og navigere direkte til en bestemt skjerm i stedet for startskjermen. Dette forbedrer brukeropplevelsen betydelig for varsler, markedsføringskampanjer og flyter på tvers av apper.

Det finnes to typer deep links: egendefinerte URL-skjemaer (som myapp://profile/123) og universelle lenker (som https://example.com/profile/123). Denne leksjonen dekker egendefinerte URL-skjemaer, som er enklere å konfigurere og fungerer på både iOS og Android.

Konfigurere skjemaet i app.json

I en Expo-administrert app registrerer De det egendefinerte URL-skjemaet i app.json under nøkkelen scheme. Velg et skjema som er unikt for appen Deres – bruk av et generisk begrep kan føre til konflikter med andre apper. Konvensjonen er å bruke appnavnet med små bokstaver, for eksempel myappname.

Etter at De har lagt til skjemaet, må De bygge den native appen på nytt (kjør npx expo run:ios eller run:android), fordi registrering av skjemaet krever native konfigurasjon. Expo leser skjemaet fra app.json gjennom prebuild-pipelinen og setter det automatisk inn i de native prosjektfilene.

// app.json
{
  'expo': {
    'name': 'MyApp',
    'slug': 'my-app',
    'scheme': 'myapp',  // registers myapp:// scheme
    'ios': {
      'bundleIdentifier': 'com.example.myapp'
    },
    'android': {
      'package': 'com.example.myapp'
    }
  }
}

Hva skjer under panseret

Når du definerer et skjema i app.json, skriver Expos prebuild de nødvendige native-konfigurasjonene:

iOS: legger til en CFBundleURLSchemes-oppføring i Info.plist, slik at systemet ruter myapp://-URL-er til appen din
Android: legger til et intent-filter i AndroidManifest.xml med handlingen VIEW og et skjema som samsvarer med det egendefinerte skjemaet ditt

Disse registreringene forteller operativsystemet at appen din håndterer URL-er med dette skjemaet. Når en annen app eller en nettside åpner en slik URL, starter operativsystemet appen din og sender URL-en til den.

// What Expo writes to AndroidManifest.xml:
// <intent-filter>
//   <action android:name='android.intent.action.VIEW' />
//   <category android:name='android.intent.category.DEFAULT' />
//   <category android:name='android.intent.category.BROWSABLE' />
//   <data android:scheme='myapp' />
// </intent-filter>

Teste URL-skjemaet lokalt

Du kan teste det egendefinerte URL-skjemaet ditt fra en terminal uten å bygge et eget testoppsett. Bruk xcrun simctl openurl booted 'myapp://profile/123' i iOS-simulatoren. Bruk adb shell am start -W -a android.intent.action.VIEW -d 'myapp://profile/123' i Android-emulatoren.

Begge kommandoene starter appen, eller bringer den i forgrunnen hvis den allerede kjører, og sender URL-en til den. Dermed kan du kontrollere at skjemaet håndteres riktig før du integrerer med faktiske lenker i andre apper eller på nettsider.

# iOS Simulator:
xcrun simctl openurl booted 'myapp://profile/123'

# Android Emulator (ADB):
adb shell am start \
  -W -a android.intent.action.VIEW \
  -d 'myapp://profile/123'

Lese den opprinnelige URL-en ved oppstart

Når appen åpnes fra en deep link mens den ikke kjører, må du lese URL-en som utløste oppstarten. Bruk Linking.getInitialURL() fra React Natives innebygde Linking-modul. Den returnerer et Promise som løses med URL-strengen, eller null hvis appen ble startet på vanlig måte.

Kall denne i en useEffect med en tom avhengighetsmatrise, slik at den kjører én gang når komponenten monteres. Analyser URL-en for å hente ut ruten, og naviger deretter når navigasjonsstakken er klar.

import { Linking } from 'react-native';
import { useEffect } from 'react';

useEffect(() => {
  Linking.getInitialURL().then((url) => {
    if (url) {
      console.log('App opened via URL:', url);
      // Parse and navigate
      handleDeepLink(url);
    }
  }).catch((err) => {
    console.error('getInitialURL error:', err);
  });
}, []);

Håndtere lenker mens appen kjører

Når appen allerede kjører og åpnes av en deep link-URL, returnerer getInitialURL() null. I stedet må du abonnere på URL-hendelser ved hjelp av Linking.addEventListener('url', callback). Denne utløses hver gang en ny URL mottas mens appen er i forgrunnen eller bakgrunnen.

Fjern alltid hendelseslytteren i oppryddingsfunksjonen som returneres fra useEffect, for å unngå minnelekkasjer. Både kontrollen av den opprinnelige URL-en og hendelseslytteren bør kalle den samme URL-behandleren, slik at oppførselen blir konsekvent.

useEffect(() => {
  // Cold launch:
  Linking.getInitialURL().then((url) => {
    if (url) handleDeepLink(url);
  });

  // While running:
  const subscription = Linking.addEventListener('url', ({ url }) => {
    handleDeepLink(url);
  });

  return () => subscription.remove(); // cleanup
}, []);

Analysere deep link-URL-er

URL-en du mottar, er en rå streng som myapp://profile/123?tab=posts. Analyser den ved hjelp av Web API-et URL, som er tilgjengelig i React Native gjennom Hermes-kjøremiljøet, eller bruk et hjelpebibliotek. Hent ut pathname for å finne skjermbildet, og bruk spørreparametere for ytterligere data.

En enkel fremgangsmåte for grunnleggende deep linker er å dele URL-en ved :// for å hente ut banen, og deretter dele banen ved / for å hente ut segmentene. Bruk URLSearchParams for spørreparametere.

function handleDeepLink(url) {
  // url = 'myapp://profile/123?tab=posts'
  const parsed = new URL(url);
  // parsed.hostname = 'profile'
  // parsed.pathname = '/123'
  // parsed.searchParams.get('tab') = 'posts'

  const screen = parsed.hostname;
  const id = parsed.pathname.replace('/', '');
  const tab = parsed.searchParams.get('tab');

  if (screen === 'profile') {
    navigation.navigate('Profile', { id, tab });
  }
}

Støtte for flere URL-skjemaer

En app kan registrere flere URL-skjemaer – for eksempel ett for produksjon (myapp://) og ett for utvikling eller staging (myapp-dev://). I Expo definerer du hovedskjemaet i feltet scheme på øverste nivå. Ytterligere skjemaer krever en config plugin som legger til ekstra intent-filtre i AndroidManifest og flere CFBundleURLSchemes-oppføringer i Info.plist.

Separate skjemaer for hvert miljø hindrer at deep linker fra staging ved et uhell åpner produksjonsappen på samme enhet under QA-testing.

// app.json - single scheme (managed):
{
  'expo': {
    'scheme': 'myapp'
  }
}

// For multiple schemes, use a config plugin:
// withMySchemes.js
const { withAndroidManifest } = require('@expo/config-plugins');
module.exports = (config) =>
  withAndroidManifest(config, (config) => {
    // Add extra intent-filters to main activity
    return config;
  });

Skjemakonflikter og anbefalte fremgangsmåter

Egendefinerte URL-skjemaer er ikke globalt registrert – hvilken som helst app kan gjøre krav på det samme skjemaet, og på iOS vinner den sist installerte appen hvis to apper deler et skjema. Derfor egner egendefinerte skjemaer seg ikke for sikkerhetsfølsomme flyter, som OAuth-tilbakekall, der du må garantere hvilken app som mottar omdirigeringen.

Anbefalte fremgangsmåter for egendefinerte skjemaer er å bruke formatet for omvendt domene (com.yourcompany.yourapp://), beholde skjemaet i samme format som appnavnet og bruke universelle lenker (HTTPS-URL-er) i stedet for alt som er sikkerhetsfølsomt, for eksempel OAuth- og betalings-tilbakekall.

// Avoid generic schemes:
// 'app://' or 'mobile://' — easily conflicts

// Better: reverse domain or unique name:
// 'com.acme.myapp://'
// 'acmemyapp://'

// In app.json:
{
  'expo': {
    'scheme': 'acmemyapp'
  }
}

Åpne URL-skjemaer i andre apper

Appen din kan også åpne andre apper via URL-skjemaene deres ved hjelp av Linking.openURL(url). Kall Linking.canOpenURL(url) først for å kontrollere om skjemaet er tilgjengelig på enheten. Dette kan brukes til å åpne kart, e-post, telefonappen eller andre apper fra appen din.

På iOS må du deklarere alle skjemaer appen åpner, i matrisen LSApplicationQueriesSchemes i Info.plist – ellers returnerer canOpenURL alltid false. Expo config plugins eller nøkkelen ios.infoPlist i app.json håndterer dette.

import { Linking } from 'react-native';

async function openMaps(address) {
  const url = 'maps://0,0?q=' + encodeURIComponent(address);
  const supported = await Linking.canOpenURL(url);
  if (supported) {
    await Linking.openURL(url);
  } else {
    // Fallback to Google Maps web:
    await Linking.openURL(
      'https://maps.google.com/?q=' + encodeURIComponent(address)
    );
  }
}

Feilsøke problemer med deep linker

Vanlige problemer med deep linker og løsningene på dem:

URL-en mottas ikke – kontroller at skjemaet finnes i app.json, og at native-appen ble bygget på nytt etter at det ble lagt til.
getInitialURL returnerer null – legg også til en lytter. På enkelte OS-versjoner kommer URL-en noen ganger som en hendelse, selv ved kald oppstart.
Navigeringen fungerer ikke – sørg for at navigeringen er klar før du kaller navigate. Bruk en ref til navigatøren sammen med onReady.
ADB-testen i Android-emulatoren mislykkes – kontroller at pakkenavnet er riktig, og at appen er installert.

Hurtigsjekk

Test forståelsen din av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte du at scheme-nøkkelen i app.json registrerer et egendefinert URL-skjema som ruter URL-er til appen din på både iOS og Android, at Linking.getInitialURL() leser URL-en som startet appen ved kald oppstart, og at Linking.addEventListener håndterer deep link-URL-er mens appen allerede kjører. Deretter bruker vi Linking API til å analysere innkommende URL-er og sende navigeringshandlinger.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Konfigurere egendefinerte URL-skjemaer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Konfigurere egendefinerte URL-skjemaer», 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 «Konfigurere egendefinerte URL-skjemaer»?

Definer et egendefinert URL-skjema i app.json for Expo, test å åpne appen fra en terminal med xcrun openurl eller adb, og les den opprinnelige URL-en når appen starter. 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 «Konfigurere egendefinerte URL-skjemaer»?

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

Konfigurere egendefinerte URL-skjemaer
Linking-API-et og URL-parsing
Konfigurere deep linking i React Navigation
Universal Links (HTTPS-deep linker) på iOS og Android

← Tilbake til React Native Academy