React-Native deeplink处理

最新推荐文章于 2024-05-26 10:04:42 发布
最新推荐文章于 2024-05-26 10:04:42 发布
阅读量3.1k 收藏
点赞数
分类专栏： react-native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mobile_zhuangch/article/details/122302296
版权

文章目录

一、deeplink是什么？

什么是deeplink, 通俗的讲就是其他app打开你app的任何页面，你需要处理这个一般用url表示的路由请求，React-Native处理deep link主要涉及到三个部分，RN端，iOS原生端，Android原生端， 本博就针对这三个部分分别讲解其实现步骤，就以我最近做的应用外文件分享到APP为主线进行讲解，并对开发中遇到的坑进行相应的说明，希望能帮助到大家少走弯路。

二、实现步骤

React-Native端的处理

RN端需要处理两种情况

  • 应用没打开，被其它app启动
 import { Linking } from "react-native";
 Linking.getInitialURL().then((url) => {
            // alert(url);
            if (!!url) {
                this.handleUrl(url);
            }
        }).catch(err => console.error('An error occurred', err));

注意，必须关闭debugger调试getInitialURL才会有值，否则获取到的值为null

  • 应用已打开，被其它app启动
Linking.addEventListener('url', (e) => this.handleUrl(e.url));

handleUrl就是你处理原生路由跳转的的地方，rn一般使用react-navigation处理路由跳转，就拿我处理文件转发为例

代码如下（示例）：

handleUrl = async (url) => {
        console.log('Link url: ' + url);
        /// url需要解码下获取文件实际路径
        url = decodeURIComponent(url);
        if (url.startsWith('file://')) {
            console.log('march file share ');
            try {
                const stat = await RNFetchBlob.fs.stat(url.substr(7));
                console.log('share file size: ' + stat.size);

                if (stat.size === 0) {
                    Toast("文件为空，不能发送，请重新选择");
                } else if (stat.size > FILE_SIZE_LIMIT.OFFLINE_FILE_MAX_SIZE) {
                    Toast("文件大小超过100M，请重新选择");
                } else {
                    this.handleRoute('ForwardExternalAppFile', { filePath: url, fileSize: stat.size });
                }
            } catch (e) {
                console.log(`handleUrl error: ${e}`);
            }
            return;
        }
    }
 handleRoute = async (routeName, routeParams) => {
        switch (routeName) {
            case 'ForwardExternalAppFile': {
                if (! await this.hasLogin()) {
                    Toast.info('抱歉，登录后才可继续使用焦谈分享功能')
                    return;
                }
                break;
            }
        }
       _navigator.dispatch(
           NavigationActions.navigate({
              routeName,
              params,
           })
       );
    }

_navigator是什么呢，就是Navigation，rn入口render里通过ref获取暂存起来

<AppNavigator ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}} />

到此RN端的处理基本就结束了，app根据业务逻辑进行相应的跳转即可，下面我们来处理原生端。

iOS端处理

ios处理deeplink，如从web页点击跳转到app里，需要在info.plist添加schema
在这里插入图片描述
在 URL Types 上添加一个 item
Identifier建议采用公司反转域名的方法保证该名字的唯一性，比如com.comname.appname

URL Schemes理论上随便填什么都可以，比如abiz

验证
在浏览器中输入abiz://，确认后就可以跳转到APP, 配置好了，拉起app时回调UIApplicationDelegate的方法

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
   
   	/// ...... 
    return [RCTLinkingManager application:app openURL:url options:options];
}

我们看看 [RCTLinkingManager application:app openURL:url options:options]的源码

+ (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)URL
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  postNotificationWithURL(URL, self);
  return YES;
}

static void postNotificationWithURL(NSURL *URL, id sender)
{
  NSDictionary<NSString *, id> *payload = @{@"url": URL.absoluteString};
  [[NSNotificationCenter defaultCenter] postNotificationName:kOpenURLNotification
                                                      object:sender
                                                    userInfo:payload];
}

- (void)startObserving
{
  [[NSNotificationCenter defaultCenter] addObserver:self
                                           selector:@selector(handleOpenURLNotification:)
                                               name:kOpenURLNotification
                                             object:nil];
}

- (void)stopObserving
{
  [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (void)handleOpenURLNotification:(NSNotification *)notification
{
  [self sendEventWithName:@"url" body:notification.userInfo];
}

RN端监听Linking的url事件时，startObserving 会调用，移除监听时stopObserving会调用，这样的话就不会再收到url事件了，为了事件一直都能接收到，只能在顶层入口监听事件，这样就和RN建立了连接，原理很简单，原生发送事件‘url’给RN，RN监听url进行路由的派发处理。当应用未打开时拉起app，原生启动入口回传递一些信息

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    NSLog(@"launchOptions:%@", launchOptions);
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:@"focustalk"
                                              initialProperties:nil];
}

launchOptions包含了相关信息，应用未打开，被其他app启动时launchOptions会包含UIApplicationLaunchOptionsURLKey为键值的的url信息， 最后传到RCTBridge里存起来了，RN端调用Linking.getInitialURL()返回启动url，源码如下

RCT_EXPORT_METHOD(getInitialURL:(RCTPromiseResolveBlock)resolve
                  reject:(__unused RCTPromiseRejectBlock)reject)
{
  NSURL *initialURL = nil;
  if (self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey]) {
    initialURL = self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey];
  } else {
    NSDictionary *userActivityDictionary =
      self.bridge.launchOptions[UIApplicationLaunchOptionsUserActivityDictionaryKey];
    if ([userActivityDictionary[UIApplicationLaunchOptionsUserActivityTypeKey] isEqual:NSUserActivityTypeBrowsingWeb]) {
      initialURL = ((NSUserActivity *)userActivityDictionary[@"UIApplicationLaunchOptionsUserActivityKey"]).webpageURL;
    }
  }
  resolve(RCTNullIfNil(initialURL.absoluteString));
}

至此RN和iOS原生之间如何建立路由通信的纽带讲完了，但我开篇提了以外部app分享文件到app为例讲解，iOS要处理外部app分享的文件需要进行一些设置，那就是info.plist，这个文件类似Android的AndroidManifest.xml，定义了app的一些能力和权限，要想处理应用外分享的文件，需要设置Document Types
在这里插入图片描述
info.plist直接右键以Source Code打开编辑即可
在这里插入图片描述
添加如下内容

<key>CFBundleDocumentTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>item</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.item</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>content </string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.content</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>composite-content</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.composite-content</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>data</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.data</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>database</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.database</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>calendar-event</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.calendar-event</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>message </string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.message</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>contact </string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.contact</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>archive </string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.archive</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>disk-image </string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.disk-image</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeIconFiles</key>
			<array/>
			<key>CFBundleTypeName</key>
			<string>text</string>
			<key>Handler rank</key>
			<string>Default</string>
			<key>LSItemContentTypes</key>
			<array>
				<string>public.text</string>
			</array>
		</dict>
	</array>

Android端处理

当点击的链接或程序化请求调用网页 URI intent 时，Android 系统会按顺序尝试执行以下每项操作，直到请求成功为止：

1.如果用户指定了可以处理该 URI 的首选应用，就打开此应用。
这个步骤需要app进行DeepLink配置，还需要服务端配合处理，具体怎么配置处理，查看官方文档https://developer.android.google.cn/training/app-links?hl=en
2.打开唯一可以处理该 URI 的应用。
3.允许用户从对话框中选择应用。

App端如何设置来响应对应的请求呢，首先需要Activity添加 intent 过滤器，以外部app分享文件到app为例

 <activity
            android:name="com.focus.focustalk.MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />

                <data android:mimeType="video/*" />
                <data android:mimeType="image/*" />
                <data android:mimeType="text/*" />
                <data android:mimeType="application/*" />
            </intent-filter>
        </activity>

如果希望在已经启动的Activity接收Intent，需要设置 android:launchMode="singleTask"
这样，如果Activity已启动，就会调用onNewIntent回调，配置完后，通过系统的文件管理器点击分享就能看到我们的app可供选择了，但是不要高兴的太早，能启动app但是RN端怎么都接收不到相应的路由信息，找半天也没找到原因，最后通过看源码才找到原因，源码在IntentModule里


  /**
   * Return the URL the activity was started with
   *
   * @param promise a promise which is resolved with the initial URL
   */
  @Override
  public void getInitialURL(Promise promise) {
    try {
      Activity currentActivity = getCurrentActivity();
      String initialURL = null;

      if (currentActivity != null) {
        Intent intent = currentActivity.getIntent();
        String action = intent.getAction();
        Uri uri = intent.getData();

        if (uri != null
            && (Intent.ACTION_VIEW.equals(action)
                || NfcAdapter.ACTION_NDEF_DISCOVERED.equals(action))) {
          initialURL = uri.toString();
        }
      }

      promise.resolve(initialURL);
    } catch (Exception e) {
      promise.reject(
          new JSApplicationIllegalArgumentException(
              "Could not get the initial URL : " + e.getMessage()));
    }
  }

源码很简单，action只有是Intent.ACTION_VIEW或NfcAdapter.ACTION_NDEF_DISCOVERED时才有路由url信息，找到原因就好办了，我们处理分享的Action是Intent.ACTION_SEND，需要转成ACTION_VIEW，重新设置intent

 Intent newIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("file://" + filePath));
 setIntent(newIntent);

@Override
    protected void onCreate(@NonNull Bundle savedInstanceState) {
        SplashScreen.show(this);  // here

        preProcessIntent(getIntent());
        super.onCreate(savedInstanceState);
        TMUtils.setStatusbg(this, R.color.color_1E79E8);
    }

    @Override
    public void onNewIntent(Intent intent) {
        preProcessIntent(intent);
        super.onNewIntent(getIntent());
    }

    /**
     *  LinkManager只能处理ACTION_VIEW, 分享的action是ACTION_SEND, 所以需要转成对应的Intent，RN才能响应对应的事件
     **/
    protected void preProcessIntent(Intent intent) {
        Bundle extras = intent.getExtras();
        String action = intent.getAction();

        String filePath = null;
        // 判断Intent是否是“分享”功能(Share Via)
        if (Intent.ACTION_SEND.equals(action)) {
            if (extras.containsKey(Intent.EXTRA_STREAM)) {
                try {
                    // 获取资源路径Uri
                    Uri uri = extras.getParcelable(Intent.EXTRA_STREAM);
                    filePath = FileUtil.getFileByUri(uri, getContentResolver());
                    Log.i("ForwardFileActivity", "uri:" + filePath);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else {
                // 获取资源路径Uri
                filePath = extras.getString("filePath");
            }

            if (null != filePath) {
                Log.d("ACTION_SEND", filePath);
                Intent newIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("file://" + filePath));
                setIntent(newIntent);
            }
        }
    }

转完后，一切正常，到此我们的原生路由和RN路由的通信机制和实现步骤讲完了

zhuangch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-branch-deep-linking-attribution：用于深度链接和归因的Branch React Native SDK。 Branch通过深层链接深层链接帮助移动应用程序增长，深层链接可推动付费获取和重新参与活动，推荐计划，内容共享，深层链接电子邮件，智能横幅，自定义用户入门等
02-05
分支React Native SDK 分支指标React Native SDK。 有关完整的详细信息，请参见。 请联系 ，以获取有关集成或故障排除的反馈或帮助。
reactnativedeeplinking处理深度连接的RN路由匹配库
08-10
react-native-deep-linking 处理深度连接的RN路由匹配库
推荐使用：React Native 深度链接库 - react-native-deep-linking
最新发布
gitblog_00091的博客
05-26 395
推荐使用：React Native 深度链接库 - react-native-deep-linking 项目地址:https://gitcode.com/luisfcofv/react-native-deep-linking 在移动应用开发中，深度链接（Deep Linking）是一种让外部链接直接打开应用内部特定内容的技术，这极大地提升了用户体验。react-native-deep-linkin...
react-native-deep-linking：用于处理深层链接的简单路由匹配库
02-05
总览 React本地路由匹配库来处理深层链接。 安装 该软件包通过npm分发： npm install react-native-deep-linking 为您的应用添加深层链接支持 对于iOS： 1.确保在Info.plist中为您的应用程序注册了URL方案 2.将此添加到您的AppDelegate.m # import " RCTLinkingManager.h " - ( BOOL )application:(UIApplication *)application openURL:( NSURL *)url sourceApplication:( NSString *)sourc
UIApplication​Delegate launch​Options
liuhanhan512的专栏
11-04 505
AppDelegate 是 iOS 各种功能的集散中心。 应用生命周期管理？URL 路由？通知？Core Data 咒语？各种三方 SDK 的初始化？一些似乎放在哪里都不合适的零散功能？统统丢进 AppDelegate.m 里吧！ 在 AppDelegate 所有这些拥挤的、超出负载的方法中，-application:didFinishLaunchingWithOptions: 是最臃
Appdelegate的代理方法简单解析
ZHZMAREN的博客
09-21 640
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions这个方法，应该都不会陌生吧？ 自定义推送或者URL Schemes的时候用这个用的最多的~ LaunchOptions这个字典查看官方文档是这么解释的： （查看官方文档方法：Al
react-native系列(23)API篇：使用Linking唤醒其它app及WebView
@黄小泽的个人博客
03-14 7259
RN官方提供Linking库用于调起其他app或者本机应用。Linking的主要属性和方法有： 属性与方法 描述 canOpenURL(url); 判断设备上是否有已经安装相应应用或可以处理URL的程序，本方法会返回一个Promise对象，只有一个回调参数，格式为Boolean值。 openURL(url); 打开设备上的某个应用或可以处理URL的程序，本方法会返回一个...
android、ios配置scheme之后，react-native如何获取url，并且自动跳转到首页
wxl1390的博客
02-02 587
android、ios配置scheme之后，react-native如何获取url，并且自动跳转到首页
React-Native堆栈导航
dandan_pengpeng的博客
04-23 595
####1 安装 依赖 npm install @react-navigation/native npm install @react-navigation/stack npm install @react-navigation/bottom-tabs npm install @react-navigation/material-top-tabs react-native-tab-view //...
React-thunk 中间件
weixin_42331327的博客
12-26 377
背景 Redux store仅支持同步数据流。使用thunk等中间件可以帮助在Redux应用中实现异步性，可以将thunk看做store的dispatch()方法的封装器；我们可以使用thunkaction creator派遣函数或Promise，而不是返回action对象。 注意，没有thunk的话，默认是同步派遣； 示例：向后台发送请求 不使用redux-thunk // store/acti...
java收银系统源码-react-native-branch-deep-linking-attribution:React原生分支深层链接归因
06-05
react-native-branch模块需要react-native >= 0.40。 纯 React Native 应用程序（使用 react-native 链接） yarn add react-native-branch或npm install --save react-native-branch （可选）将 branch.json 文件...
DeepLinkKit:一种出色的路由匹配，基于块的方式来处理您的深层链接
03-31
深度链接套件 概述 DeepLink Kit是一种出色的路由匹配，基于块的方式来处理您的深层链接。 该库和几行代码将带您上路，而无需决定如何设置URL格式，解析它们，传递数据以及导航到特定内容或执行操作。 看看这个 通过运行以下命令来尝试DeepLinkKit示例项目： pod try "DeepLinkKit" 安装 可可豆 DeepLinkKit可通过。 要安装该库，只需将以下行添加到您的Podfile中： pod "DeepLinkKit" 迦太基 要通过迦太基安装，请将以下行添加到您的Cartfile ： github "button/DeepLinkKit" 其他 如果您不使用CocoaPods或Carthage，则可以在项目中包含中的所有源文件。 用法 请按照以下简单步骤在5分钟或更短的时间内为您的应用添加深层链接支持。 注意：从1.0.0 ，所有导入都应更新为导入<D
SignerApp-react-native:使用React Native框架通过Deep Link演示进程间通信
05-17
SignerAppReact本机使用React Native框架通过Deep Link演示进程间通信从外部接收数据接收方案格式： solosigner://sign/{caller_id}/{something} {caller_id} ：呼叫者的身份。 例如：Android应用程序ID或iOS捆绑包...
轻松链接到ReactNative中的其他应用程序
08-10
通过以上介绍，我们可以看到`react-native-app-link`在React Native应用中扮演了重要的角色，使开发者能够轻松处理与其他应用的交互，提升了用户的使用体验。正确理解和使用这个库，对于构建功能完善的混合移动应用...
presentation-react-router-4-universal-links:使用具有本地链接支持的React Native和React Router 4的Universal MobileWeb应用的PresentationDemo
04-30
react-router-4-universal-links”指的是一个演示项目，它展示了如何在React Native和React Router 4中实现Universal Links（通用链接）功能，以便在移动Web应用中提供更好的用户体验，特别是在处理深度链接时。...
YOLOv3-pytorch-deepsort-iOS-Django:多个对象计数
05-01
多个对象计数 关于 该项目结合了YOLOv3（pyTorch）和Deepsort。 iOS应用程序已实现。 后端基于Django RESTful框架，前端在React Native上实现。 关键词 ...react-native link react-navigation yarn a
在React Native中创建深层链接
weixin_26724171的博客
10-08 582
I recently came across this situation where I had to deep link an app in React Native. After googling a lot, I realised that there’s a lack of up-to-date tutorials out there. So as I had a bunch of is...
React Native 应用深度链接是如何通过 URL打开到指定页面
xiangzhihong8的专栏
08-19 3461
什么是深度链接（Deep Link） 深度链接是一项可以让一个App通过一个URL地址打开，之后导航至特定页面或者资源，或者展示特定UI的技术，Deep 的意思是指被打开的页面或者资源并不是App的首页，最常使用到的地方包括但远远不限于 Push Notification、邮件、网页链接等。 其实这个技术在很久很久以前就已经存在了，鼠标点击一下 mailto:pantao@parcmg.com 这...
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值