Trung BìnhReact Native iconReact Native

Deep linking config trong RN — setup ra sao?

Deep link cho phép URL bên ngoài (web link, push notification) mở thẳng vào một screen cụ thể trong app.

Bước 1 — Khai báo URL scheme:
- iOS: Info.plist thêm CFBundleURLTypes với scheme custom (myapp://).
- Android: AndroidManifest.xml thêm <intent-filter> cho android.intent.action.VIEW + <data android:scheme="myapp" />.
- Universal Link / App Link (recommend): dùng URL HTTPS thật (https://example.com/...) thay vì scheme custom — cần config Apple App Site Association và Android Asset Links file.

Bước 2 — Cấu hình react-navigation:

tsx
const linking = {
  prefixes: ['myapp://', 'https://example.com'],
  config: {
    screens: {
      HomeTab: { screens: { Detail: 'product/:id' } },
    },
  },
}
<NavigationContainer linking={linking}>...</NavigationContainer>

Link https://example.com/product/42 → mở Detail screen với route.params.id === '42'.

Bước 3 — Test:
- iOS simulator: xcrun simctl openurl booted "myapp://product/42".
- Android: adb shell am start -a android.intent.action.VIEW -d "myapp://product/42".

Pitfall: Universal Link bị tắt nếu user "long-press → copy" link (hành vi iOS). Test trên device thật, click từ Mail/Notes app.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native