React-native 打开另一个应用程序答案

【问题标题】：React-native open another appReact-native 打开另一个应用程序
【发布时间】：2017-04-28 12:37:48
【问题描述】：

我有一个按钮，我想在 facebook 应用程序 中打开一个 facebook 页面。我可以使用this solution 在浏览器中打开链接，但我正在寻找更好的解决方案来打开 faecbook 应用程序和我的愿望页面。这一般可以吗？怎么样？

【问题讨论】：

标签： android facebook react-native

【解决方案1】：

这在 Android 上可能无法实现，但要做到这一点，您基本上遵循相同的链接说明，您只需将 http 替换为 fb（或适当的应用程序 ID）。这个SO answer 有更多关于什么可能或不可能的信息。

假设有可能，将 facebook 应用程序打开到个人资料，它看起来像这样

const pageId = 'abc123'
Linking.openURL(`fb://profile/${pageId}`)
  .catch(err => console.error('An error occurred', err));

请注意，我使用的是fb，而不是http

【讨论】：

感谢@Spencer，但没有一个推荐的方法起作用。

【解决方案2】：

与@Spencer 回答的解决方案相同，但使用page 而不是profile 打开粉丝专页。

<Button
  title="Go to Facebook page"
  onPress={() => {
    const FANPAGE_ID = 'xxxxxxxxxxxxxxxxx'
    const FANPAGE_URL_FOR_APP = `fb://page/${FANPAGE_ID}`
    const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${FANPAGE_ID}`
    Linking.canOpenURL(FANPAGE_URL_FOR_APP)
      .then((supported) => {
        if (!supported) {
          Linking.openURL(FANPAGE_URL_FOR_BROWSER)
        } else {
          Linking.openURL(FANPAGE_URL_FOR_APP)
        })
      .catch(err => console.error('An error occurred', err))
    }}
/>

注意：您必须使用粉丝页面 ID，而不是粉丝页面 slug 名称。如果不知道怎么获取id，在浏览器中打开粉丝页，查看源码，找到page_id参数即可。

【讨论】：

太棒了！流畅地工作。
我无法让它在 iOS 上运行。 supported 变量对我来说始终评估为 false，即使安装了 Facebook 应用程序。官方文档facebook.github.io/react-native/docs/linking.html 认为这将适用于 iOS 9 及更高版本，除非您在 Info.plist 中设置了一个名为 LSApplicationQueriesSchemes 的键。不幸的是，我正在使用 Create-React-Native-App，因此无法访问 Info.plist 文件。

【解决方案3】：

@Spencer 和 @Thành 的混合答案在 iOS 上为我工作。

所以我决定只尝试打开 Facebook 应用程序链接，然后如果失败，我会退回到网络浏览器链接，如下所示：

import { Linking } from "react-native";

const openFacebookLink = facebookId => {
  const FANPAGE_URL_FOR_APP = `fb://profile/${facebookId}`;
  const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${facebookId}`;

  Linking.canOpenURL(FANPAGE_URL_FOR_APP)
    .then(appSupported => {
      if (appSupported) {
        console.log(`Can handle native url: ${FANPAGE_URL_FOR_APP}`);
        return Linking.openURL(FANPAGE_URL_FOR_APP);
      } else {
        console.log(
          `Can't handle native url ${FANPAGE_URL_FOR_APP} defaulting to web URL ${FANPAGE_URL_FOR_BROWSER}`
        );
        return Linking.canOpenURL(FANPAGE_URL_FOR_BROWSER).then(
          webSupported => {
            if (webSupported) {
              console.log(`Can handle web url: ${FANPAGE_URL_FOR_BROWSER}`);
              return Linking.openURL(FANPAGE_URL_FOR_BROWSER);
            }
            return null;
          }
        );
      }
    })
    .catch(err => console.error("An error occurred", err));
};

注意：这里的appSupported 变量将始终返回false，直到您在info.plist 文件中编辑/添加了LSApplicationQueriesSchemes 值。您将在项目的 ios/yourappname 子文件夹中找到此文件。这是我添加到我的行：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fb</string>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

注意：如果您使用的是 Create React Native App 和/或 Expo，那么您将无法编辑此文件。因为这个原因我放弃了世博会。

这对我来说适用于 iOS，但 Android 每次都会在浏览器中打开它。我读过 Android 处理这些东西的方式与 iOS 完全不同，所以我不确定那里是否有任何简单的解决方案。

【讨论】：