。

因此#xff0c;深度链接可以引导用户到应用程序内的特定屏幕#xff0c;而不仅仅是启动移动设备上的应用程序#xff0c;从而提供更好的用户体验。

这个特定的屏幕可能位于一系列层…深度链接是一种技术其中给定的

URL

或资源用于在移动设备上打开特定页面或屏幕。

因此深度链接可以引导用户到应用程序内的特定屏幕而不仅仅是启动移动设备上的应用程序从而提供更好的用户体验。

这个特定的屏幕可能位于一系列层次结构页面下因此称之为深度链接。

它对于营销活动应用用户保留等非常有用。

作为一个应用用户你可能在打开链接时体验过深度链接例如从网页浏览器打开电子商务商店中的产品链接。

如果你已经安装了该商店的应用它可能会使用深度链接来打开应用并直接导航你到该产品的屏幕。

React

应用中处理深度链接。

我们将创建一个简单的应用来处理深度链接并通过使用

React

开始之前介绍一下​最近很火的开源技术低代码。

让使用者可以通过可视化的方式以更少的编码更快速地构建和交付应用软件极大程度地降低了软件的开发、配置、部署和培训成本。

应用地址

构建的简单、跨平台快速开发框架。

前后端封装了上千个常用类方便扩展采用微服务、前后端分离架构集成了代码生成器支持前后端业务代码生成满足快速开发框架集成了表单、报表、图表、大屏等各种常用的

Demo

在本教程中您将构建的示例应用将包含两个屏幕。

第一个屏幕将是带有物品列表的主屏幕。

第二个屏幕将是显示物品详细信息的详细信息屏幕。

我们配置

并安装所需的依赖项。

这将允许通过导航配置深度链接并在两个屏幕之间进行导航。

yarn

com.facebook.react.ReactActivity;public

class

rnDeepLinking;}Overrideprotected

void

的新目录。

这将包含应用程序的所有屏幕组件。

在其中创建两个新文件HomeScreen.js

HomeScreen.js

组件包裹这样当应用用户按下列表中的用户名称时他们将导航到详情屏幕。

src/screens/HomeScreen.jsimport

React,

{ActivityIndicator,View,Text,FlatList,Pressable

from

{fetch(https://jsonplaceholder.typicode.com/users).***n(res

res.json()).***n(res

{setData(res);setIsLoading(false);}).catch(error

[]);const

}}{item.name}/Text/Pressable);};return

(View

(FlatListdata{data}contentContainerStyle{{paddingVertical:

item.id}ItemSeparatorComponent{Separator}renderItem{renderList}//)}/View);

};export

src/components/Separator.jsimport

React

src/navigation/RootNavigator.js

src/navigation/RootNavigator.jsimport

React

react-navigation/native-stack;import

HomeScreen

createNativeStackNavigator();const

RootNavigator

(NavigationContainerRootStack.NavigatorRootStack.Screen

nameHome

//RootStack.Navigator/NavigationContainer);

};export

./src/navigation/RootNavigator;const

App

构建应用程序请在终端窗口的第二个实例中运行适当的命令。

这将为你指定的平台构建应用程序。

for

一旦应用程序构建完成上述命令将会在指定平台上安装它。

以下是该应用程序在

iOS

大多数生产级应用程序都有多个屏幕和嵌套的导航器。

所以让我们看看如何在我们的示例应用中使用

React

库通过其路由逻辑处理深度链接需要定义一个配置对象。

在此对象中定义一个包含

URI

src/navigation/RootNavigator.js//

rest

(NavigationContainerlinking{linking}fallback{ActivityIndicator

colorblue

/}RootStack.NavigatorRootStack.Screen

nameHome

//RootStack.Navigator/NavigationContainer);

URI-scheme

ios/your-project-name/AppDelegate.m

Add

(BOOL)application:(UIApplication

*)urloptions:(NSDictionaryUIApplicationOpenURLOptionsKey,id

*)options

Your-app-name/ios/app-name.xcworkspace。

接下来转到

设备手动设置方案您需要配置该方案。

打开/android/app/src/main/AndroidManifest.xml

launchMode

activityandroid:name.MainActivityandroid:labelstring/app_nameandroid:configChangeskeyboard|keyboardHidden|orientation|screenSize|uiModeandroid:launchModesingleTaskandroid:windowSoftInputModeadjustResizeintent-filteraction

android:nameandroid.intent.action.MAIN

/category

android:nameandroid.intent.category.LAUNCHER

//intent-filter!--

android:nameandroid.intent.action.VIEW

/category

android:nameandroid.intent.category.DEFAULT

/category

android:nameandroid.intent.category.BROWSABLE

/data

方案的详细信息屏幕时显示每个人的信息必须配置详细信息屏幕的路径并添加一个代表列表中人员

const

我们也处理一种情况即应用程序用户从主屏幕导航到详情屏幕也就是说不使用链接。

在这种情况下打开

HomeScreen.js

{fetch(https://jsonplaceholder.typicode.com/users/${personId}).***n(res

res.json()).***n(res

[];Object.keys(res).forEach(key

key,

});});setData(fetchedDetails);setIsLoading(false);}).catch(error

else

{fetch(https://jsonplaceholder.typicode.com/users/${personDetailsId}).***n(res

res.json()).***n(res

[];Object.keys(res).forEach(key

key,

});});setData(fetchedDetails);setIsLoading(false);}).catch(error

[]);return

}}key{person.key}{${person.key}:

${person.value}}/Text))}/View)}/View);

};export

深度链接可以显著改善您的移动应用的用户体验并使搜索引擎提供上下文敏感的搜索和结果。

希望这个指南能帮助你在你的应用中取得优秀的成果。