React Native Academy · Pelajaran

API Pemautan dan Penghurai URL

Gunakan API Pemautan untuk mendengar URL masuk ketika aplikasi berjalan, huraikan laluan dan parameter pertanyaan URL, kemudian hantar tindakan navigasi.

Pelajaran 2 daripada 413 langkah

API Pemautan dan Penghurai URL ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Gambaran Keseluruhan Modul Linking

Modul Linking terbina dalam React Native ialah antara muka antara aplikasi anda dengan sistem pengendalian yang mengendalikan URL. Modul ini mempunyai dua tujuan: keluar — membuka URL dalam pelayar, peta, e-mel, telefon dan aplikasi lain; serta masuk — menerima URL yang digunakan untuk membuka aplikasi anda.

Untuk memastikan pautan mendalam berfungsi dengan betul, anda perlu mengendalikan kedua-dua keadaan mula sejuk (aplikasi dilancarkan melalui URL) dan mula hangat (URL tiba semasa aplikasi sudah berjalan). Modul Linking menyediakan API yang berbeza untuk setiap senario.

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

Persediaan Pendengar URL Menyeluruh

Corak yang disyorkan mengendalikan mula sejuk dan mula hangat dalam satu kesan. Baca getInitialURL() untuk mendapatkan URL pelancaran sejuk dan tambahkan pendengar untuk URL mula hangat. Kedua-duanya memanggil fungsi handleURL yang sama supaya logik penghalaan berada di satu tempat.

Letakkan kesan ini dalam komponen navigasi akar atau cangkuk useDeepLink tersuai supaya ia berjalan apabila navigasi tersedia dan dibersihkan dengan betul apabila komponen dinyahlekap.

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

Menghuraikan Komponen URL

React Native moden (dengan Hermes) menyokong API Web URL. Bina objek URL daripada rentetan pautan mendalam untuk mengakses protocol, hostname, pathname dan searchParams dengan mudah. Cara ini jauh lebih teguh berbanding memecahkan rentetan secara manual.

Untuk skema myapp://settings/notifications?highlight=push, nama hos ialah settings, nama laluan ialah /notifications, dan searchParams menyediakan parameter pertanyaan sebagai objek URLSearchParams.

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

Pemadanan Laluan dan Navigasi

Dengan bahagian URL yang telah dihuraikan, laksanakan fungsi routeDeepLink yang memadankan nama skrin dengan tindakan navigasi. Gunakan objek carian atau pernyataan switch untuk memetakan skrin URL kepada nama skrin navigator dan bentuk parameter.

Sentiasa lindungi aplikasi daripada URL yang tidak sah atau cacat — jika skrin tidak dikenali, navigasi ke skrin utama dan bukannya mencetuskan ralat. Pautan mendalam daripada sumber luaran hendaklah dianggap sebagai input yang tidak dipercayai.

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

Menunggu Navigasi Bersedia

Ralat lazim: pengendali pautan mendalam memanggil navigation.navigate() sebelum bekas navigasi dipasang dan dimulakan. Ref navigasi mungkin bernilai null atau susunan belum disediakan, menyebabkan panggilan navigate diabaikan secara senyap.

Gunakan panggilan balik onReady bagi NavigationContainer bersama ref untuk mengesan apabila navigasi sedia. Simpan URL pautan mendalam yang belum diproses dan prosesnya dalam onReady serta selepas setiap perubahan keadaan navigasi.

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

Skema URL Tersuai berbanding URL HTTPS

API Linking berfungsi dengan URL skema tersuai (myapp://) dan pautan universal HTTPS (https://yoursite.com/path). Untuk pautan universal, struktur URL lebih kemas — nama hos ialah domain anda dan laluan ialah laluan kandungan — tetapi pautan ini memerlukan konfigurasi pelayan web untuk berfungsi.

Semasa menguji pautan mendalam HTTPS secara setempat, gunakan URL skema tersuai dalam pembangunan dan pautan universal dalam pengeluaran. Fungsi routeDeepLink yang sama boleh mengendalikan kedua-duanya jika anda menormalkan hasil yang dihuraikan kepada struktur umum.

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

Pautan Keluar: openURL

Linking.openURL() membuka sebarang URL di luar aplikasi anda. Hantar URL HTTPS untuk dibuka dalam pelayar, URL tel: untuk membuka pendail, mailto: untuk membuka klien e-mel, dan skema aplikasi pihak ketiga untuk membuka aplikasi tertentu. Ia mengembalikan Promise — sentiasa tunggu dan tangkap ralat sekiranya URL tersebut tidak disokong.

Untuk pautan e-mel, kodkan subjek dan isi kandungan dalam URL menggunakan pemformatan mailto: standard. Pada iOS, aplikasi Telefon mengendalikan pautan tel:; pada Android, pendail lalai mengendalikannya.

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

Semakan Keselamatan canOpenURL

Sebelum memanggil openURL, gunakan Linking.canOpenURL() untuk mengesahkan bahawa peranti boleh mengendalikan skema tersebut. Pada iOS 9 dan ke atas, anda mesti menyenaraikan skema luaran yang dibenarkan dalam LSApplicationQueriesSchemes dalam Info.plist, atau canOpenURL akan mengembalikan false walaupun aplikasi itu dipasang.

Aliran kerja terurus Expo membolehkan anda menambahkan entri senarai dibenarkan ini melalui kunci ios.infoPlist dalam app.json. Sentiasa sediakan pilihan sandaran (seperti URL HTTPS) apabila aplikasi natif tidak dipasang.

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']
//   }
// }

Pembersihan URL Pautan Mendalam

Pautan mendalam daripada sumber luaran tidak boleh dipercayai secara membuta tuli. Pautan berniat jahat boleh menghantar nilai sewenang-wenangnya sebagai parameter dan cuba menavigasi ke skrin yang tidak dikehendaki atau menyuntik data. Sentiasa bersihkan dan sahkan parameter URL sebelum menggunakannya.

Untuk ID, sahkan bahawa formatnya sepadan dengan format yang dijangka (UUID, integer). Untuk nama skrin, gunakan carian senarai dibenarkan — jangan sekali-kali menavigasi ke nama skrin yang diambil terus daripada URL. Catat dan buang URL yang tidak sah dan bukannya menyebabkan aplikasi ranap.

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

Menjejak Sumber Pautan Mendalam

Kempen pemasaran dan pemberitahuan sering memerlukan atribusi — mengetahui pautan yang mendorong tingkah laku pengguna tertentu. Tambahkan parameter UTM atau parameter sumber tersuai pada URL pautan mendalam, ekstrak parameter tersebut dalam pengendali, dan catatkannya ke sistem analitik anda.

Contohnya, myapp://product/42?source=email_campaign&campaign=summer_sale memberitahu anda bahawa pengguna datang daripada kempen e-mel. Catat peristiwa ini ke Amplitude, Firebase Analytics atau Mixpanel dalam fungsi routeDeepLink sebelum menavigasi.

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

Menguji Pautan Mendalam dalam Binaan Pengeluaran

Pautan mendalam berkelakuan berbeza dalam pembangunan (Expo Go) dan binaan pengeluaran. Sentiasa uji pautan mendalam dalam binaan pengeluaran atau keluaran yang dipasang pada peranti sebenar atau emulator. Expo Go mempunyai skema URLnya sendiri (exp://) yang bercanggah dengan skema tersuai.

Gunakan TestFlight (iOS) atau trek pengujian dalaman (Android) untuk pengesahan pautan mendalam dari hujung ke hujung sebelum dikeluarkan kepada umum. Dokumentasikan skema URL dan semua laluan yang disokong dalam README supaya pasukan QA dapat menguji setiap laluan.

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

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Rumusan Pelajaran

Dalam pelajaran ini, Anda telah mempelajari bahawa API Linking mengendalikan pembukaan URL keluar dan URL pautan mendalam masuk melalui getInitialURL dan addEventListener, API Web URL menghuraikan komponen pautan mendalam seperti nama hos, laluan dan searchParams dengan kemas, serta laluan pautan mendalam mesti dibenarkan dan dibersihkan sebelum navigasi untuk mengelakkan isu keselamatan. Seterusnya, kita akan mengkonfigurasi sokongan pautan mendalam terbina dalam React Navigation untuk menghalakan URL ke skrin secara automatik.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “API Pemautan dan Penghurai URL” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “API Pemautan dan Penghurai URL”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “API Pemautan dan Penghurai URL”?

Gunakan API Pemautan untuk mendengar URL masuk ketika aplikasi berjalan, huraikan laluan dan parameter pertanyaan URL, kemudian hantar tindakan navigasi. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “API Pemautan dan Penghurai URL” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Mengkonfigurasi Skim URL Tersuai
API Pemautan dan Penghurai URL
Konfigurasi Pautan Mendalam React Navigation
Pautan Universal (Pautan Mendalam HTTPS) pada iOS dan Android

← Kembali ke React Native Academy