React导航v5:如何使用Branch.io

lvmkulzt  于 2023-03-19  发布在  React
关注(0)|答案(2)|浏览(136)

我们有一个使用Branch.io通用链接的应用程序。https://help.branch.io/developers-hub/docs/react-native#read-deep-link
在react-native应用上,你可以设置一个订阅者来接收javascript运行时中的深度和通用链接。
从此处使用最新的react-navigationhttps://reactnavigation.org/docs/deep-linking
React Navigation希望原生地处理深层链接。React Navigation似乎没有公开手动启动链接的好方法。
我该如何同时利用这两个服务呢?获取一个深度链接并将其分解为一个可路由的深度链接是一个挑战。我们的应用程序有嵌套的路由器,我不想重做从路径到屏幕和参数的转换。最近有人这样做过吗?谢谢。

42fyovps

42fyovps1#

您可以使用subscribe选项通知React Navigation有关传入链接的信息:

const linking = {
  // Custom susbcription to handle incoming links
  subscribe(listener) {
    branch.subscribe(({ error, params, uri }) => {
      if (error) {
        console.error('Error from Branch: ' + error);
        return;
      }

      if (params['+non_branch_link']) {
        const nonBranchUrl = params['+non_branch_link'];
        // Route non-Branch URL if appropriate.
        return;
      }

      if (!params['+clicked_branch_link']) {
        // Indicates initialization success and some other conditions.
        // No link was opened.
        return;
      }

      // A Branch link was opened
      const url = params.$canonical_url;

      listener(url);
    });

    return () => {
      // Clean up the event listeners
      branch.unsubscribe();
    };
  },
  // Options such as prefixes, screens config etc.
  // ...
};

文件:https://reactnavigation.org/docs/deep-linking/#third-party-integrations

agyaoht7

agyaoht72#

const linking = {
  // Custom susbcription to handle incoming links
  subscribe(listener) {
    branch.subscribe(({ error, params, uri }) => {
      if (error) {
        console.error('Error from Branch: ' + error);
        return;
      }

      if (params['+non_branch_link']) {
        const nonBranchUrl = params['+non_branch_link'];
        // Route non-Branch URL if appropriate.
        return;
      }

      if (!params['+clicked_branch_link']) {
        // Indicates initialization success and some other conditions.
        // No link was opened.
        return;
      }

      // A Branch link was opened
      const url = params.$canonical_url;

      listener(url);
    });

    return () => {
      // Clean up the event listeners
      branch.unsubscribe();
    };
  },
  // Options such as prefixes, screens config etc.
  // ...
};



//my code of generating a deep link url 
const onShare = async () => {
  const ProfileDeepLinkData = {
    $og_title: "My Profile",
    $og_description: "Welcome to My App",
    // $og_image_url: '<YOUR_PAGE_IMAGE_URL>',
    customData: {
      screen: "vendorProfile",
    },
  }
  const branchUniversalObject = await Branch.createBranchUniversalObject(
    "hello",
    ProfileDeepLinkData,
  )

  const { url } = await branchUniversalObject.generateShortUrl()
  console.log(url)
  // setDeepLink(url)
  // readLink()
  try {
    const result = await Share.share({
      message: url,
      url: url,
    })
    if (result.action === Share.sharedAction) {
      if (result.activityType) {
        console.log(result.activityType)
        // shared with activity type of result.activityType
      } else {
        // shared
      }
    } else if (result.action === Share.dismissedAction) {
      // dismissed
    }
  } catch (error: any) {
    Alert.alert(error.message)
  }
}

相关问题