React Native Academy · Oppitunti

Linking-API ja URL-osoitteiden jäsentäminen

Kuunnelkaa saapuvia URL-osoitteita Linking-APIlla sovelluksen ollessa käynnissä, jäsentäkää URL-osoitteen polku ja kyselyparametrit ja lähettäkää navigointitoiminto.

Oppitunti 2/413 vaihetta

Linking-API ja URL-osoitteiden jäsentäminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Linking-moduulin yleiskatsaus

React Nativen sisäänrakennettu Linking-moduuli toimii sovelluksesi ja käyttöjärjestelmän URL-käsittelyjärjestelmän välisenä rajapintana. Sillä on kaksi tarkoitusta: lähtevät — URL-osoitteiden avaaminen selaimissa, kartoissa, sähköpostissa, puhelimessa ja muissa sovelluksissa — sekä saapuvat — sovelluksesi avaamiseen käytettyjen URL-osoitteiden vastaanottaminen.

Jotta deep linking toimisi oikein, sinun on käsiteltävä sekä cold start -tilanne, jossa sovellus käynnistetään URL-osoitteella, että warm start -tilanne, jossa URL saapuu sovelluksen ollessa jo käynnissä. Linking-moduuli tarjoaa eri rajapinnat kumpaakin tilannetta varten.

import { Linking } from 'react-native';

// Outgoing:
Linking.openURL('https://example.com');

// Check if URL can be opened:
Linking.canOpenURL('myapp://screen').then(Boolean);

// Incoming - cold launch:
Linking.getInitialURL();

// Incoming - while running:
Linking.addEventListener('url', ({ url }) => {});

Kattava URL-kuuntelijan määritys

Suositeltu toimintamalli käsittelee sekä cold start- että warm start -tilanteet yhdessä efektissä. Lue getInitialURL()-funktion avulla kylmäkäynnistyksen URL ja lisää kuuntelija warm start -tilanteessa saapuville URL-osoitteille. Molemmat kutsuvat samaa handleURL-funktiota, jotta reitityslogiikka pysyy yhdessä paikassa.

Sijoita tämä efekti navigoinnin juurikomponenttiin tai mukautettuun useDeepLink-hookiin, jotta se suoritetaan navigoinnin ollessa käytettävissä ja siivotaan asianmukaisesti komponentin irrotessa.

useEffect(() => {
  function handleURL(url) {
    if (url) routeDeepLink(url);
  }

  // Cold launch URL:
  Linking.getInitialURL().then(handleURL);

  // Warm launch URL:
  const sub = Linking.addEventListener('url', ({ url }) => handleURL(url));

  return () => sub.remove();
}, []);

URL-komponenttien jäsentäminen

Moderni React Native Hermes-ajonaikaisella ympäristöllä tukee Web-rajapinnan URL-oliota. Muodosta deep link -merkkijonosta URL-olio, jonka avulla voit käyttää helposti ominaisuuksia protocol, hostname, pathname ja searchParams. Tämä on huomattavasti luotettavampaa kuin merkkijonon jakaminen manuaalisesti.

Skeemalla myapp://settings/notifications?highlight=push hostname on settings, pathname on /notifications ja searchParams tarjoaa kyselyparametrit URLSearchParams-oliona.

function parseDeepLink(url) {
  // 'myapp://settings/notifications?highlight=push'
  const parsed = new URL(url);

  return {
    screen: parsed.hostname,          // 'settings'
    path: parsed.pathname.slice(1),   // 'notifications'
    params: Object.fromEntries(
      parsed.searchParams.entries()   // { highlight: 'push' }
    ),
  };
}

Reittien vastaavuuden tarkistaminen ja navigointi

Kun URL:n osat on jäsennetty, toteuta routeDeepLink-funktio, joka yhdistää näytön nimen navigointitoimintoon. Käytä hakutaulukkoa tai switch-lausetta URL:n näytönimien yhdistämiseen navigaattorin näyttönimiin ja parametrien rakenteisiin.

Varmista aina, että virheelliset tai väärin muodostetut URL-osoitteet käsitellään turvallisesti — jos näyttöä ei tunnisteta, siirry aloitusnäyttöön virheen heittämisen sijaan. Ulkoisista lähteistä tulevia deep link -osoitteita on käsiteltävä epäluotettavana syötteenä.

function routeDeepLink(url) {
  const { screen, path, params } = parseDeepLink(url);

  switch (screen) {
    case 'profile':
      navigation.navigate('Profile', { userId: path, ...params });
      break;
    case 'product':
      navigation.navigate('Product', { productId: path });
      break;
    case 'settings':
      navigation.navigate('Settings', { section: path });
      break;
    default:
      navigation.navigate('Home');
  }
}

Navigoinnin valmistumisen odottaminen

Yleinen virhe on, että deep link -käsittelijä kutsuu funktiota navigation.navigate() ennen kuin navigointisäilö on liitetty ja alustettu. Navigointiref voi olla null tai pinoa ei ole vielä määritetty, jolloin navigate-kutsu saatetaan ohittaa hiljaisesti.

Käytä NavigationContainerin onReady-takaisinkutsua yhdessä ref-viitteen kanssa havaitaksesi, milloin navigointi on valmis. Tallenna odottavat deep link -URL-osoitteet ja käsittele ne onReady-kutsussa sekä jokaisen navigointitilan muutoksen jälkeen.

const navigationRef = useNavigationContainerRef();
const pendingUrl = useRef(null);

function handleURL(url) {
  if (navigationRef.isReady()) {
    routeDeepLink(url);
  } else {
    pendingUrl.current = url; // queue it
  }
}

<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    if (pendingUrl.current) {
      routeDeepLink(pendingUrl.current);
      pendingUrl.current = null;
    }
  }}
>

Mukautettu URL-skeema verrattuna HTTPS-osoitteisiin

Linking-rajapinta toimii sekä mukautettujen skeemojen URL-osoitteiden (myapp://) että HTTPS-universal linkkien (https://yoursite.com/path) kanssa. Universal linkeissä URL-rakenne on selkeämpi — hostname on verkkotunnuksesi ja polku on sisällön polku — mutta niiden toiminta edellyttää verkkopalvelimen määrityksiä.

Kun testaat HTTPS-deep linkkejä paikallisesti, käytä kehityksessä mukautettuja skeeman URL-osoitteita ja tuotannossa universal linkkejä. Sama routeDeepLink-funktio voi käsitellä molempia, jos normalisoit jäsennetyn tuloksen yhteiseen rakenteeseen.

function parseDeepLink(url) {
  const parsed = new URL(url);

  if (parsed.protocol === 'https:') {
    // Universal link: https://myapp.com/profile/123
    const parts = parsed.pathname.split('/').filter(Boolean);
    return { screen: parts[0], path: parts[1], params: {} };
  } else {
    // Custom scheme: myapp://profile/123
    return {
      screen: parsed.hostname,
      path: parsed.pathname.slice(1),
      params: Object.fromEntries(parsed.searchParams.entries()),
    };
  }
}

Lähtevät linkit: openURL

Linking.openURL() avaa minkä tahansa URL-osoitteen sovelluksesi ulkopuolella. Välitä HTTPS-osoitteet selaimessa avattaviksi, tel:-osoitteet numerovalitsimen avaamiseksi, mailto:-osoitteet sähköpostisovelluksen avaamiseksi ja kolmansien osapuolten sovellusten skeemat tiettyjen sovellusten avaamiseksi. Funktio palauttaa Promisen — odota sen valmistumista aina ja käsittele virheet siltä varalta, ettei URL-osoitetta tueta.

Sähköpostilinkeissä koodaa aihe ja viesti URL-osoitteeseen mailto:-muodon mukaisesti. iOS:ssä Puhelin-sovellus käsittelee tel:-linkit ja Androidissa oletusarvoinen numerovalitsin käsittelee ne.

// Open website:
await Linking.openURL('https://example.com');

// Call a phone number:
await Linking.openURL('tel:+15555551234');

// Compose email:
const subject = encodeURIComponent('Support Request');
const body = encodeURIComponent('Hi, I need help with...');
await Linking.openURL('mailto:support@example.com?subject=' + subject + '&body=' + body);

// Open Twitter profile:
await Linking.openURL('twitter://user?screen_name=reactnative');

canOpenURL-funktion turvallisuustarkistukset

Tarkista ennen openURL-funktion kutsumista funktion Linking.canOpenURL() avulla, pystyykö laite käsittelemään skeeman. iOS 9:ssä ja sitä uudemmissa versioissa ulkoiset skeemat on lisättävä sallittujen luetteloon Info.plist-tiedoston LSApplicationQueriesSchemes-kentässä, tai canOpenURL palauttaa arvon false, vaikka sovellus olisi asennettu.

Expon managed workflow mahdollistaa näiden sallittujen merkintöjen lisäämisen app.json-tiedoston ios.infoPlist-avaimella. Tarjoa aina varavaihtoehto, kuten HTTPS-URL, siltä varalta, ettei natiivisovellusta ole asennettu.

async function openTwitterProfile(username) {
  const twitterAppUrl = 'twitter://user?screen_name=' + username;
  const twitterWebUrl = 'https://twitter.com/' + username;

  const canOpen = await Linking.canOpenURL(twitterAppUrl);
  await Linking.openURL(canOpen ? twitterAppUrl : twitterWebUrl);
}

// app.json (iOS whitelist):
// 'ios': {
//   'infoPlist': {
//     'LSApplicationQueriesSchemes': ['twitter', 'instagram']
//   }
// }

Deep link -URL-osoitteiden puhdistaminen

Ulkoisista lähteistä tuleviin deep link -osoitteisiin ei pidä koskaan luottaa sokeasti. Haitallinen linkki voi välittää parametreina mielivaltaisia arvoja, yrittää navigoida tarkoituksettomille näytöille tai syöttää sovellukseen haitallista dataa. Puhdista ja validoi URL-parametrit aina ennen niiden käyttämistä.

Tunnisteiden osalta varmista, että ne vastaavat odotettua muotoa, kuten UUID:tä tai kokonaislukua. Käytä näytönnimille sallittujen arvojen hakutaulukkoa — älä koskaan navigoi suoraan URL-osoitteesta saadun näytönimen perusteella. Kirjaa virheelliset URL-osoitteet ja hylkää ne sovelluksen kaatumisen sijaan.

const ALLOWED_SCREENS = new Set(['profile', 'product', 'settings', 'home']);

function routeDeepLink(url) {
  try {
    const { screen, path, params } = parseDeepLink(url);

    if (!ALLOWED_SCREENS.has(screen)) {
      console.warn('Deep link to unknown screen:', screen);
      navigation.navigate('Home');
      return;
    }

    // Validate ID format:
    if (path && !/^[a-z0-9-]+$/i.test(path)) {
      throw new Error('Invalid path: ' + path);
    }

    navigation.navigate(capitalize(screen), { id: path, ...params });
  } catch (e) {
    navigation.navigate('Home');
  }
}

Deep link -lähteiden seuranta

Markkinointikampanjoissa ja ilmoituksissa tarvitaan usein attribuutiota eli tietoa siitä, mikä linkki johti mihinkin käyttäjän toimintaan. Lisää deep link -URL-osoitteisiin UTM-parametreja tai mukautettu lähdeparametri, poimi ne käsittelijässä ja kirjaa ne analytiikkajärjestelmään.

Esimerkiksi myapp://product/42?source=email_campaign&campaign=summer_sale kertoo, että käyttäjä tuli sähköpostikampanjasta. Kirjaa tämä tapahtuma Amplitudessa, Firebase Analyticsissa tai Mixpanelissa routeDeepLink-funktiossa ennen navigointia.

function routeDeepLink(url) {
  const { screen, path, params } = parseDeepLink(url);

  // Log attribution:
  if (params.source || params.campaign) {
    analytics.track('deep_link_opened', {
      screen,
      source: params.source,
      campaign: params.campaign,
    });
  }

  // Then navigate:
  navigation.navigate(capitalize(screen), { id: path });
}

Deep linkien testaaminen tuotantoversioissa

Deep linkit toimivat eri tavoin kehitysympäristössä, kuten Expo Gossa, ja tuotantoversioissa. Testaa deep linking aina tuotanto- tai release-versiossa, joka on asennettu oikeaan laitteeseen tai emulaattoriin. Expo Golla on oma URL-skeemansa (exp://), joka on ristiriidassa mukautettujen skeemojen kanssa.

Käytä TestFlightia iOS:ssä tai Androidin sisäisen testauksen raitaa kokonaisvaltaiseen deep link -testaukseen ennen julkaisua. Dokumentoi URL-skeemasi ja kaikki tuetut polut README-tiedostoon, jotta laadunvarmistustiimit voivat testata jokaisen reitin.

// Supported deep links (document these for QA):
// myapp://home
// myapp://profile/{userId}
// myapp://product/{productId}?highlight={feature}
// myapp://settings/{section}
// myapp://order/{orderId}

// Test with:
// iOS: xcrun simctl openurl booted 'myapp://profile/abc123'
// Android: adb shell am start -a android.intent.action.VIEW -d 'myapp://profile/abc123'

Pikatarkistus

Testaa, miten hyvin ymmärrät tämän oppitunnin React Native -mobiilikehityksen käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte, että Linking API käsittelee sekä ulospäin avattavat URL-osoitteet että saapuvat deep link -URL-osoitteet getInitialURL- ja addEventListener-menetelmien avulla, URL Web API jäsentää deep link -osoitteen osat, kuten hostname-, pathname- ja searchParams-arvot, selkeästi ja deep link -reitit on sallittava ja puhdistettava ennen navigointia tietoturvaongelmien estämiseksi. Seuraavaksi määritämme React Navigationin sisäänrakennetun deep link -tuen, jotta URL-osoitteet ohjautuvat automaattisesti näyttöihin.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Linking-API ja URL-osoitteiden jäsentäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Linking-API ja URL-osoitteiden jäsentäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Linking-API ja URL-osoitteiden jäsentäminen”?

Kuunnelkaa saapuvia URL-osoitteita Linking-APIlla sovelluksen ollessa käynnissä, jäsentäkää URL-osoitteen polku ja kyselyparametrit ja lähettäkää navigointitoiminto. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Linking-API ja URL-osoitteiden jäsentäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Mukautettujen URL-mallien määrittäminen
Linking-API ja URL-osoitteiden jäsentäminen
React Navigationin deep link -määritys
Universal Links (HTTPS-deep linkit) iOS:ssä ja Androidissa

← Takaisin: React Native Academy