React Native 應用程序中的深度鏈接:所有你需要知道的!
已發表: 2023-03-13深度鏈接已成為當今互聯世界的重要組成部分。 “深度鏈接”這個詞對很多人來說可能聽起來很陌生; 但是,你們中的大多數人一定已經以某種形式使用過深度鏈接的概念。
你還記得你點擊一個鏈接並直接在你設備上安裝的應用程序中打開一個特定屏幕的例子嗎? 無需通過應用程序手動導航? 或者,例如,您希望您的朋友閱讀一篇文章並分享該文章的 URL。 您的朋友單擊鏈接並一次性轉到所需的內容,而不必先啟動主頁然後搜索文章。
你有沒有想過這是怎麼發生的?
嗯,這就是深度鏈接的作用。 用戶點擊一個鏈接並被重定向到移動應用程序或網站中的特定位置,而無需浪費時間在主屏幕上導航。 其他示例包括與朋友分享 YouTube 視頻或亞馬遜產品的鏈接、打開品牌的促銷鏈接以轉到特定產品頁面等。 在這種情況下,深度鏈接是必不可少的,因為常規 Web 鏈接無法有效地與本機移動應用程序一起使用。
這篇文章是關於理解深度鏈接的概念是如何工作的,並了解它的好處。 我們還將討論如何在適用於 Android 和 iOS 操作系統的 React Native 移動應用程序中實現深度鏈接的關鍵步驟。 我們選擇了 React Native 框架,因為它是當今移動應用程序開發最流行的偏好之一。
什麼是深度鏈接?
深度鏈接是一種技術,它使人們能夠從外部來源(如另一個應用程序或網站)鏈接移動應用程序內的特定內容或屏幕。 深層鏈接是可點擊的鏈接,可將用戶直接發送到移動應用程序中的特定位置,而不是在線商店或網絡鏈接。 這個應用內位置可以是任何東西,例如付費專區後面的一段安全內容、一篇文章、一個產品或一個登錄屏幕。 用戶只需單擊 URL 或資源即可到達所需的應用內位置,而無需自己搜索頁面。
深度鏈接的概念如何運作?
深度鏈接指定了一個自定義的 URL 方案,如通用鏈接(適用於 iOS 設備)和一個意圖 URL(適用於 Android 設備)。 當用戶點擊深層鏈接時,操作系統會攔截該鏈接並打開相關應用程序(如果該應用程序安裝在用戶設備上)。 然後,應用程序使用深層鏈接中存在的信息來導航到所需的內容或屏幕。
延遲深度鏈接?
如果用戶深層鏈接到某個應用程序,但該應用程序未安裝在他們的設備上怎麼辦? 在這裡,延遲深度鏈接出現了。 如果用戶點擊了一個鏈接,但該鏈接所屬的應用沒有被下載; 用戶會被定向到 App Store。 在這裡,用戶會被引導至 App Store 的確切位置,他們只需單擊一下即可安裝所需的應用程序。 而且,一旦安裝了應用程序,特定的屏幕就會立即打開。
深度鏈接有什麼好處?
深度鏈接節省了用戶的時間並顯著增強了用戶體驗。
深度鏈接是商業品牌提高用戶保留率和轉化率的絕佳工具。 品牌可以將促銷活動和激勵措施與深度鏈接聯繫起來; 只需單擊一下即可將用戶重定向到他們的產品頁面。 這樣,品牌可以輕鬆說服用戶嘗試新產品或服務。 例如,音樂應用所有者想要推廣一張新的音樂專輯。 因此,所有者投資廣告並與知名網站建立聯繫。 帶有深層鏈接的音樂專輯封面作為廣告活動顯示在該網站上。 當網站用戶點擊深層鏈接時,他們將被重定向到音樂應用程序中的特定頁面,並可以收聽專輯。
此外,您可以跟踪深度鏈接活動並檢查您的活動的執行情況。 深層鏈接還可以提高您的 SEO 排名並最大限度地減少應用程序的流失。
如何在 React Native 應用程序中實現深度鏈接?
react-navigation 庫提供了用於深度鏈接 React Native 應用程序的鏈接模塊。 這對 React Native 開發人員來說非常方便。
您需要在應用程序中定義一個深層鏈接模式,將特定的 URL 映射到相關的應用程序屏幕。 react-navigation 提供 Linking 模塊和 NavigationContainer 等組件來定義模式。 定義架構後,它可用於處理傳入的深層鏈接。 您需要藉助 Linking 模塊提供的 addEventListner 方法註冊回調函數,以處理傳入的深層鏈接。 當應用程序通過深層鏈接啟動時,將調用回調函數。 此回調函數可用於在應用程序中導航所需的屏幕。
在 IoS 和 Android 中配置深度鏈接
您需要使用 URL 方案(唯一 URL)配置移動應用程序。 此 URL 方案負責定位和啟動安裝在用戶智能手機設備上的應用程序。 要使應用程序導航到屏幕,您必須設置與配置應用程序的 URL 方案相匹配的前綴。 然後屏幕需要在應用程序中映射到它們各自的路徑。 當路徑附加到 URL 時,應用程序能夠直接導航到特定屏幕。
iOS 和 Android 操作系統的深度鏈接配置略有不同。 來看看專業的React Native開發者是如何實現Android和iOS深度鏈接的吧!
在 React Native Android 應用程序中配置深層鏈接
步驟#1 定義深層鏈接
打開清單文件並定義您計劃在應用中使用的深層鏈接,以便用戶可以直接導航到應用中的特定頁面。 在這裡,您需要為該特定頁面定義一個深層鏈接。 以下是如何在 AndroidManifest.xml 文件中定義深層鏈接:
<活動

android:name=”.ProductActivity”
android:label=”Product”>
<意圖過濾器>
<action android:name=”android.intent.action.VIEW” />
<category android:name=”android.intent.category.DEFAULT” />
<category android:name=”android.intent.category.BROWSABLE” />
<數據
android:host=”example.com”
android:pathPrefix=”/產品”
android:scheme=”http” />
<數據
android:host=”example.com”
android:pathPrefix=”/產品”
android:scheme=”https” />
</意圖過濾器>
</活動>
步驟#2 配置 Intent 過濾器
轉到 android/app/src/main 並從那裡打開名為 AndroidManifest.xml 的文件。 現在,您需要為每個深層鏈接配置意圖過濾器。 意圖過濾器指定您的應用程序能夠處理的數據量和操作。
步驟#3 意圖處理
您需要處理應用程序活動中的意圖。 此意圖將從深層鏈接啟動您的應用程序。 對於意圖處理,您需要從意圖中提取數據,並確定您希望將用戶定向到的應用程序內的特定位置或特定屏幕。 此後,您的項目需要在 Android 模擬器中重建。
在 React Native IOS 應用程序中配置深層鏈接
在 Xcode 中的 URL 類型下設置您的 URL 方案。 修改“AppDelegate”文件並在 iOS 模擬器中重建項目。 現在 iOS 項目已在 Xcode 中打開。
步驟#1 定義 URL Scheme
為您的應用程序定義自定義的 URL 方案。 此 URL 方案是您的應用程序獲得識別的獨特方式。 其他網站或應用程序將使用此唯一標識符來啟動您的應用程序。
打開文件 info.plist。 在此文件的頂部添加一個新的 URL 類型。 可以在標識符和 URL 方案字段中輸入 URL 方案。 然後展開項目 0(零),選擇 URL Schemes,並命名項目 0。此名稱是您的應用程序可鏈接的名稱。 例如,您的應用名稱是“OurApp”。 URL 方案將類似於“ourapp://”或“ourapp://detail?id=123”。
步驟#2 處理代碼實現
現在,您需要實現處理深層鏈接的代碼。 轉到“AppDelegate”文件並添加處理方案的方法。 何時通過 URL 方案啟動您的應用程序; 此方法將被調用。 此方法將接收 URL。 將從 URL 中提取必要的信息,並在您的應用程序中顯示正確的屏幕。
步驟#3 測試
現在,需要測試深層鏈接。 為此,您可以使用工具 Safari 或支持深度鏈接概念的任何其他第三方應用程序。 例如,您正在使用 Safari。 在 Safari 中打開具有定義的 URL 方案的 URL。 此後,您的應用程序將以正確的屏幕啟動。
步驟#4 通用鏈接處理
除了添加自定義 URL 方案外,您的應用還可以配置為支持通用鏈接(其他應用或網站使用的標準 HTTPS 鏈接)以啟動您的應用。 這就是您需要處理通用鏈接的方式。 配置應用程序的權利。 然後,為通用鏈接處理創建相關代碼,並在您的應用程序的委託中實現代碼。
現在,您可以在 iOS 模擬器中重建您的項目。
最後的想法
我希望您現在已經精通脫鉤的概念及其執行過程。 深度鏈接已成為當今應用程序的必需品。 但是,重要的是要以最專業的知識來執行深度鏈接的實施過程。 如果您缺乏技術專長或必要的資源,經驗豐富的 React Native 應用開發公司可以幫助您毫不費力地完成深度鏈接的創建和執行過程。