React Native Academy · Pelajaran

Konfigurasi Pautan Mendalam React Navigation

Konfigurasikan prop linking pada NavigationContainer dengan peta skrin supaya React Navigation menavigasi secara automatik ke skrin yang betul apabila pautan mendalam dibuka.

Pelajaran 3 daripada 413 langkah

Konfigurasi Pautan Mendalam React Navigation ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Pautan Mendalam Terbina Dalam React Navigation

React Navigation menyediakan sokongan pautan mendalam terbina dalam melalui prop linking pada NavigationContainer. Apabila dikonfigurasikan, React Navigation mengendalikan URL semasa permulaan sejuk dan permulaan hangat secara automatik dengan menghuraikannya berdasarkan peta skrin, kemudian menavigasi ke skrin yang sepadan — Anda tidak perlu menulis kod penghuraian URL atau kod API Linking secara manual.

Pendekatan deklaratif ini jauh kurang terdedah kepada ralat berbanding pengendalian URL secara manual dan bersepadu dengan lancar dengan pengurusan keadaan pustaka navigasi.

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

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

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

Prop linking: awalan dan config

Prop linking mempunyai dua medan utama: prefixes (tatasusunan awalan URL yang hendak dikendalikan) dan config (peta skrin). Tatasusunan prefixes memberitahu React Navigation skema URL yang perlu dipintas. Anda boleh menyertakan kedua-dua skema tersuai dan domain HTTPS untuk pautan sejagat.

Objek config.screens memetakan nama komponen skrin kepada corak laluan URL. Laluan URL selepas awalan dipadankan dengan corak ini untuk menentukan skrin yang hendak dituju.

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

Parameter Laluan dan Rentetan Pertanyaan

Parameter laluan URL ditakrifkan dengan awalan titik bertindih seperti :userId. Apabila URL sepadan, parameter tersebut diekstrak secara automatik dan dihantar sebagai parameter laluan kepada komponen skrin. Parameter rentetan pertanyaan juga dihuraikan secara automatik dan ditambahkan pada parameter laluan.

Contohnya, myapp://profile/123?tab=posts sepadan dengan profile/:userId dan skrin menerima route.params = { userId: '123', tab: 'posts' }. Tiada penghuraian URL manual diperlukan.

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

Konfigurasi Navigator Bersarang

Apabila skrin berada di dalam navigator bersarang (contohnya, navigator tab dengan tindanan dalam setiap tab), peta skrin mesti mencerminkan struktur bersarang tersebut. Gunakan kekunci screens di dalam config skrin induk untuk mentakrifkan laluan skrin bersarang.

React Navigation mengendalikan keadaan navigasi dengan betul — ia menyediakan keseluruhan tindanan yang diperlukan untuk sampai ke skrin yang sangat bersarang, termasuk mana-mana navigator induk yang perlu dimulakan terlebih dahulu.

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

Padanan Laluan Tepat

Secara lalai, React Navigation melakukan padanan awalan pada laluan. Tambahkan exact: true pada config skrin untuk memerlukan padanan laluan yang tepat. Padanan tepat penting apabila laluan mungkin sepadan secara separa dengan beberapa skrin.

Contohnya, tanpa padanan tepat, corak post akan sepadan dengan myapp://post dan juga myapp://post-list. Dengan exact: true, hanya laluan yang tepat akan sepadan.

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

Fungsi Penghuraian dan Penukaran Rentetan Tersuai

Konfigurasi linking juga menerima fungsi parse dan stringify bagi setiap skrin untuk mengubah parameter laluan sebelum menghantarnya kepada komponen. parse menukar rentetan parameter URL kepada jenis yang betul (contohnya, rentetan '123' kepada nombor 123). stringify menukar parameter kembali kepada rentetan URL untuk penjanaan pautan.

Fungsi ini memberikan Anda kawalan penuh terhadap perubahan parameter tanpa perlu melaksanakan penghuraian URL sendiri.

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 dan getStateFromPath

React Navigation menyediakan utiliti getPathFromState dan getStateFromPath yang menukar antara objek keadaan navigasi dengan rentetan laluan URL. Utiliti ini berguna untuk menjana pautan mendalam yang boleh dikongsi daripada keadaan navigasi semasa dan untuk logik pemulihan keadaan tersuai.

getPathFromState(state, config) mengembalikan laluan URL untuk keadaan navigasi semasa. getStateFromPath(path, config) mengembalikan keadaan navigasi untuk URL yang diberikan. Kedua-duanya memerlukan objek config yang sama seperti yang digunakan dalam prop linking.

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

Mendayakan Pautan Mendalam dalam Expo (Expo Go)

Apabila berjalan dalam Expo Go semasa pembangunan, URL pautan mendalam aplikasi Anda menggunakan skema exp:// dengan hos Expo Go. React Navigation mengendalikan perkara ini secara automatik apabila Anda menyertakan Linking.createURL('') dalam tatasusunan awalan (menggunakan pakej expo-linking), yang menentukan awalan yang betul untuk Expo Go dan binaan pengeluaran.

Ini bermakna konfigurasi pautan mendalam Anda berfungsi dalam pembangunan (Expo Go) dan pengeluaran (skema tersuai aplikasi Anda) tanpa sebarang perubahan pada config.

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

Menjana Pautan Mendalam Secara Terprogram

Gunakan Linking.createURL(path, options) daripada expo-linking untuk menjana URL pautan mendalam yang berfungsi dalam pembangunan dan pengeluaran. Hantar parameter pertanyaan dalam pilihan queryParams. Gunakan URL yang dijana dalam pemberitahuan, helaian perkongsian dan kempen e-mel.

Pendekatan ini lebih selamat daripada menetapkan URL skema secara keras kerana createURL menghasilkan awalan yang betul untuk persekitaran masa jalan semasa secara automatik.

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

Menguji Konfigurasi Linking

React Navigation menyediakan alat penyahpepijatan linking — tetapkan linking.enabled: 'auto' dan pustaka akan mencatat hasil pemadanan URL ke konsol semasa pembangunan. Ini membantu mendiagnosis sebab URL tidak menavigasi ke skrin yang dijangka.

Untuk pengujian menyeluruh, tulis fungsi ujian yang memanggil getStateFromPath dengan setiap URL pautan mendalam yang dijangka dan mengesahkan bahawa keadaan navigasi yang terhasil adalah betul. Ini mengesan ralat config sebelum ralat tersebut sampai kepada pengguna.

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

Skrin Tidak Ditemui untuk Pautan Tidak Sah

Konfigurasikan skrin sandaran untuk URL yang tidak sepadan dengan mana-mana corak yang ditakrifkan. Dalam konfigurasi linking, tambahkan skrin NotFound dan tetapkannya sebagai sandaran. Ini penting kerana pautan mendalam daripada pihak ketiga mungkin menggunakan laluan yang salah, dan Anda harus memaparkan mesej yang berguna dengan cara yang baik dan bukannya menyebabkan aplikasi ranap atau gagal secara senyap.

Skrin tidak ditemui harus menerangkan bahawa pautan tersebut tidak lagi sah, menyediakan cara untuk menavigasi ke skrin utama dan, secara pilihan, mencatat URL tidak sah itu untuk analisis.

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

Semakan Pantas

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

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini, Anda telah mempelajari bahawa prop linking pada NavigationContainer mengendalikan penghuraian dan navigasi pautan mendalam secara automatik menggunakan peta skrin deklaratif, navigator bersarang disokong dengan menyarang konfigurasi screens di dalam konfigurasi skrin induk, dan ExpoLinking.createURL menjana pautan mendalam yang peka terhadap persekitaran serta berfungsi dalam Expo Go dan binaan pengeluaran. Seterusnya, kita akan mengkonfigurasi pautan sejagat menggunakan URL HTTPS dengan Apple App Site Association dan Android App Links.

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 “Konfigurasi Pautan Mendalam React Navigation” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Konfigurasi Pautan Mendalam React Navigation”, 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 “Konfigurasi Pautan Mendalam React Navigation”?

Konfigurasikan prop linking pada NavigationContainer dengan peta skrin supaya React Navigation menavigasi secara automatik ke skrin yang betul apabila pautan mendalam dibuka. 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 3 daripada 4.

Berapa lamakah pelajaran “Konfigurasi Pautan Mendalam React Navigation” 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