React-native如何打开另一个应用程序？

Question

我有一个按钮，想要在Facebook应用程序中打开Facebook页面。我可以使用这个解决方案在浏览器中打开链接，但我正在寻找一种更好的解决方案，可以打开Facebook应用程序和我的目标页面。一般来说，这是可能的吗？如何做到？

- Pooya

Answer 1

这可能在Android上不太可能做到，但要这样做，您只需按照相同的链接指令，将http替换为fb（或适当的应用程序ID）。此SO答案提供了更多有关可能性和不可能性的信息。

假设这是可能的，打开Facebook应用程序到一个资料页面将看起来像这样。

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

请注意，我使用的是fb而不是http。此处涉及到IT技术相关内容。

- Spencer Carli

---

谢谢@Spencer，但是推荐的方法都没有起作用。 - Pooya

Answer 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，而不是粉丝页的名称。如果您不知道如何获取ID，请在浏览器中打开您的粉丝页，查看源代码并找到page_id参数。

- Thành Trang

---

太棒了！！运行非常流畅。 - Pooya

我无法在iOS上使其工作。即使Facebook应用已安装，supported变量对我始终评估为false。官方文档https://facebook.github.io/react-native/docs/linking.html指出，除非您在Info.plist中设置一个名为`LSApplicationQueriesSchemes`的键，否则在iOS 9及更高版本中将出现此情况。不幸的是，我正在使用Create-React-Native-App，因此无法访问Info.plist文件。 - ChillyPenguin

Answer 3

在 iOS 上，@Spencer 和 @Thành 提供的答案混搭起来对我很有帮助。

因此，我只尝试打开 Facebook 应用程序链接，如果失败了，我就回退到 Web 浏览器链接，像这样：

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变量在你编辑/添加info.plist文件中的LSApplicationQueriesSchemes值之前，将始终返回false。你可以在项目的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，则无法编辑此文件。出于这个原因，我放弃了Expo。

这对我在iOS上有效，但是Android每次都在浏览器中打开它。我已经阅读过Android完全不同于iOS处理这些东西，所以我不确定是否有任何简单的解决方案。

- ChillyPenguin