如何在反应原生 Firebase 动态链接中从收到的链接中提取参数? - Javascript

Firebase 动态链接提供了一种简单的方式，通过链接来直接将用户带到您的应用程序的特定屏幕。在接收到 Firebase 动态链接时，我们可能需要从链接中提取相关参数，以便在应用程序中进行相应操作。这篇文章将会介绍如何在 React Native 环境下使用 Firebase 动态链接并从中提取参数。

步骤 1: 安装 Firebase 和相关依赖

在 React Native 应用程序中集成 Firebase 动态链接，首先需要安装几个必需的依赖项。在项目根目录下运行以下命令：

yarn add @react-native-firebase/app
yarn add @react-native-firebase/dynamic-links

上述命令将为您的应用程序添加 Firebase 动态链接的依赖项。

步骤 2: 配置 Firebase 动态链接

在您的 Firebase 控制台中，确保动态链接已启用并且已经在您的项目中进行了配置。为了在您的 React Native 应用程序中集成 Firebase 动态链接，还需要在您的 AndroidManifest.xml 和 AppDelegate.m 文件中添加一些指令。

在 AndroidManifest.xml 中添加以下代码：

<intent-filter android:label="@string/app_name">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    
    <data android:scheme="https" android:host="yourapp.page.link"/>
    <data android:scheme="http" android:host="yourapp.page.link"/>
</intent-filter>

在 AppDelegate.m 中添加以下代码：

#import <Firebase.h>

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
    if ([FirebaseDynamicLinks handleUniversalLink:url]) {
      //处理动态链接
      return YES;
    }
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray *))restorationHandler {
    if([[userActivity.activityType componentsSeparatedByString:@"."].lastObject isEqualToString:@"webpage"]){
          if( [FirebaseDynamicLinks handleUniversalLink:userActivity.webpageURL]){
              //处理动态链接
          }
    }
    return YES;
}

上述配置将允许您的应用程序处理从 Firebase 动态链接中传入的参数。

步骤 3: 获取链接参数

当您的应用程序接收到 Firebase 动态链接时，您可以使用 getInitialLink 方法获取链接的初始参数，该方法将在应用程序启动时触发。以下是一个简单的代码片段示例：

import React, {useEffect} from 'react';
import { View, Text } from 'react-native';
import { DynamicLink } from '@react-native-firebase/dynamic-links';

function App() {
  useEffect(() => {
    DynamicLink.getInitialLink()
      .then((link) => {
        if (link) {
          // 在此处执行相关操作，例如导航到其他屏幕等
          console.log(link.url);
          console.log(link.queryParameters);
        }
      })
      .catch((err) => {
        console.error('Error getting dynamic link', err);
      });
  }, []);

  return (
    <View>
      <Text>My App</Text>
    </View>
  );
}

export default App;

上述代码使用 getInitialLink 方法从链接中提取参数，并将其输出到控制台。您可以根据自己的需要执行自己的操作。

结论

通过上述步骤，我们已经成功集成了 Firebase 动态链接，并从中提取了相应的链接参数。在集成 Firebase 动态链接时，有许多细节需要注意。但是，如果您完成了上述步骤，则不需要处理任何其他问题。