React Native Academy · Lektion

Konfigurera anpassade URL-scheman

Definiera ett anpassat URL-schema i app.json för Expo, testa att öppna appen från en terminal med xcrun openurl eller adb och läs den initiala URL:en när appen startar.

Lektion 1 av 413 steg

Konfigurera anpassade URL-scheman är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad är deep linking?

Deep linking gör det möjligt för externa URL:er — i e-postmeddelanden, webbläsare, QR-koder eller andra appar — att öppna React Native-appen och navigera direkt till en specifik skärm i stället för startskärmen. Detta förbättrar användarupplevelsen avsevärt för aviseringar, marknadsföringskampanjer och flöden mellan appar.

Det finns två typer av deep links: anpassade URL-scheman (som myapp://profile/123) och universella länkar (som https://example.com/profile/123). Den här lektionen behandlar anpassade URL-scheman, som är enklare att konfigurera och fungerar på både iOS och Android.

Konfigurera schemat i app.json

I en Expo-hanterad app registrerar ni ert anpassade URL-schema i app.json under nyckeln scheme. Välj ett schema som är unikt för appen — ett generiskt namn riskerar att krocka med andra appar. En vanlig konvention är att använda appens namn med små bokstäver, till exempel myappname.

När ni har lagt till schemat måste ni bygga om den inbyggda appen (kör npx expo run:ios eller run:android), eftersom schemaregistrering kräver inbyggd konfiguration. Expo läser schemat från app.json i sin prebuild-pipeline och lägger automatiskt in det i projektfilerna för den inbyggda appen.

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

Vad händer under huven

När Ni definierar ett schema i app.json skriver Expos prebuild-funktion de nödvändiga native-konfigurationerna:

iOS: lägger till en post för CFBundleURLSchemes i Info.plist så att systemet dirigerar myapp://-URL:er till Er app
Android: lägger till ett intent-filter i AndroidManifest.xml med åtgärden VIEW och ett schema som matchar Ert anpassade schema

Dessa registreringar talar om för operativsystemet att Er app hanterar URL:er med det schemat. När en annan app eller en webbsida öppnar en sådan URL startar operativsystemet Er app och skickar URL:en till 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>

Testa URL-schemat lokalt

Ni kan testa Ert anpassade URL-schema från en terminal utan att bygga ett särskilt testverktyg. I iOS-simulatorn använder Ni xcrun simctl openurl booted 'myapp://profile/123'. I Android-emulatorn använder Ni adb shell am start -W -a android.intent.action.VIEW -d 'myapp://profile/123'.

Båda kommandona startar appen, eller tar den till förgrunden om den redan körs, och skickar URL:en till den. På så sätt kan Ni verifiera schemahanteringen innan Ni integrerar med faktiska länkar i andra appar eller på webbsidor.

# 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'

Läsa den initiala URL:en vid start

När appen öppnas från ett kallt tillstånd (det vill säga inte körs) via en deep link behöver Ni läsa URL:en som utlöste starten. Använd Linking.getInitialURL() från React Natives inbyggda Linking-modul. Den returnerar ett Promise som upplöses med URL-strängen eller null om appen startades på vanligt sätt.

Anropa detta i en useEffect med en tom beroendearray så att det körs en gång vid montering. Analysera URL:en för att hämta routen och navigera därefter när navigeringsstacken är redo.

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);
  });
}, []);

Hantera länkar medan appen körs

När appen redan körs och en deep link-URL öppnar den returnerar getInitialURL() null. I stället behöver Ni prenumerera på URL-händelser med Linking.addEventListener('url', callback). Denna utlöses varje gång en ny URL tas emot medan appen är i förgrunden eller bakgrunden.

Ta alltid bort händelselyssnaren i rensningsfunktionen som returneras från useEffect för att förhindra minnesläckor. Både kontrollen av den initiala URL:en och händelselyssnaren bör anropa samma URL-hanterare för konsekvens.

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
}, []);

Analysera deep link-URL:er

URL:en Ni tar emot är en rå sträng, till exempel myapp://profile/123?tab=posts. Analysera den med Web API:et URL (som är tillgängligt i React Native via Hermes runtime) eller med ett hjälpbibliotek. Hämta sökvägen för att fastställa skärmen och frågeparametrarna för ytterligare data.

Ett enkelt tillvägagångssätt för grundläggande deep links är att dela URL:en vid :// för att få sökvägen och sedan dela sökvägen vid / för att få segmenten. Använd URLSearchParams för frågeparametrar.

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öd för flera URL-scheman

En app kan registrera flera URL-scheman — till exempel ett för produktion (myapp://) och ett för utveckling eller staging (myapp-dev://). I Expo definierar Ni det primära schemat i fältet scheme på toppnivå. Ytterligare scheman kräver ett config plugin som lägger till extra intent-filters i AndroidManifest och ytterligare poster för CFBundleURLSchemes i Info.plist.

Separata scheman för varje miljö förhindrar att deep links för staging av misstag öppnar produktionsappen på samma enhet under QA-testning.

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

Schemakonflikter och rekommenderade arbetssätt

Anpassade URL-scheman är inte globalt registrerade — vilken app som helst kan göra anspråk på samma schema, och i iOS vinner den senast installerade appen om två appar delar ett schema. Därför är anpassade scheman inte lämpliga för säkerhetskänsliga flöden, till exempel OAuth-callbacks, där Ni måste kunna garantera vilken app som tar emot omdirigeringen.

Rekommenderade arbetssätt för anpassade scheman: använd formatet med omvänd domän (com.yourcompany.yourapp://), håll schemat i samma format som appnamnet och använd universal links (HTTPS-URL:er) i stället för allt som är säkerhetskänsligt, till exempel OAuth och betalnings-callbacks.

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

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

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

Öppna andra appars URL-scheman

Er app kan också öppna andra appar via deras URL-scheman med Linking.openURL(url). Anropa först Linking.canOpenURL(url) för att kontrollera om schemat är tillgängligt på enheten. Använd detta för att öppna kartor, e-post, telefonuppringaren eller andra appar från Er app.

I iOS måste Ni deklarera alla scheman som Er app öppnar i arrayen LSApplicationQueriesSchemes i Info.plist — annars returnerar canOpenURL alltid false. Expo config plugins eller nyckeln ios.infoPlist i app.json hanterar detta.

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

Felsöka problem med deep links

Vanliga problem med deep links och deras lösningar:

URL:en tas inte emot — kontrollera att schemat finns i app.json och att native-appen byggdes om efter att det lades till.
getInitialURL returnerar null — lägg även till en lyssnare. I vissa fall anländer URL:en som en händelse även vid kalla starter i vissa OS-versioner.
Navigeringen fungerar inte — säkerställ att navigeringen är redo innan Ni anropar navigate. Använd en ref till navigatorn tillsammans med onReady.
ADB-testet i Android-emulatorn misslyckas — kontrollera att paketnamnet är korrekt och att appen är installerad.

Snabbtest

Testa Er förståelse av begreppen inom React Native Mobile Development från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har Ni lärt Er att schema-nyckeln i app.json registrerar ett anpassat URL-schema som dirigerar URL:er till Er app på både iOS och Android, att Linking.getInitialURL() läser URL:en som startade appen från ett kallt tillstånd och att Linking.addEventListener hanterar deep link-URL:er medan appen redan körs. Nästa steg är att använda Linking API för att analysera inkommande URL:er och skicka navigeringsåtgärder.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera anpassade URL-scheman” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Konfigurera anpassade URL-scheman”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera anpassade URL-scheman”?

Definiera ett anpassat URL-schema i app.json för Expo, testa att öppna appen från en terminal med xcrun openurl eller adb och läs den initiala URL:en när appen startar. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfigurera anpassade URL-scheman”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera anpassade URL-scheman
Linking API och URL-tolkning
Konfigurera deep linking i React Navigation
Universal Links (HTTPS-deep links) på iOS och Android

← Tillbaka till React Native Academy