Question

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

Answer 1

这在Android上可能无法实现，但为了实现此目的，您基本上遵循相同的链接说明，只需将http换成fb（或相应的应用ID）即可。这个SO answer有更多关于可能或不可能的信息。

假设有可能，将Facebook应用程序打开到配置文件，它看起来就像这样

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

请注意，我使用http

而不是fb

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参数。

Answer 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，直到您在LSApplicationQueriesSchemes文件中编辑/添加info.plist值为止。您将在项目的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完全不同，所以我不确定那里是否有任何简单的解决方案。

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

3 个答案: