让 React Native Facebook SDK 正常工作

Question

我正在尝试在 iOS ReactNative 项目中获取 FBSDK 运行。

我react-native init AwesomeProject得到一个全新的项目，按照github上的React Native FBSDK instructions，我在main.m中得到一个错误：

thread 1:signal SIGABRT

一点谷歌搜索引导我 here then here 这让我在我的 info.plist 中添加了一个 LSApplicationQueriesSchemes 键。解决该问题。

然后我按照 Facebook app setup guide 添加了 info.plist 的 NSAppTransportSecurity 键。但是应用程序无法连接到开发服务器。

再谷歌搜索一下，我发现 this page 说我不需要 NSAppTransportSecurity 密钥，所以我将其取出并运行应用程序。哇，问题解决了。

回到 React Native FBSDK github page，我在他们的用法部分中获取了第一个示例；登录按钮。将其逐字复制到我的应用程序中。它运行。我点击它。还有...

thread 1:signal SIGABRT

啊啊啊！

有没有人让这个工作？

Answer 1

我有！安装 SDK 后，您需要确保所有配置都已属性设置。您还需要在 AppDelegate 中导入 sdk。

这是我 info.plist 的相关配置。

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb12345678910</string>
      </array>
    </dict>
  </array>
  <key>FacebookAppID</key>
  <string>12345678910</string>
  <key>FacebookDisplayName</key>
  <string>My Awesome App</string>


  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>facebook.com</key>
      <dict>
        <key>NSIncludesSubdomains</key> <true/>
        <key>NSThirdPartyExceptionRequiresForwardSecrecy</key> <false/>
      </dict>
      <key>fbcdn.net</key>
      <dict>
        <key>NSIncludesSubdomains</key> <true/>
        <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>  <false/>
      </dict>
      <key>akamaihd.net</key>
      <dict>
        <key>NSIncludesSubdomains</key> <true/>
        <key>NSThirdPartyExceptionRequiresForwardSecrecy</key> <false/>
      </dict>
      <key>localhost</key>
      <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/>
      </dict>
      <key>api.mydomain.com</key>
      <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/>
      </dict>
    </dict>
  </dict>


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

共有三个部分：

您需要定义您的 App Id 和显示名称。
您需要定义您的应用程序可以访问的域，显然是 facebook 的域、akamai 和您自己的域，我已将 localhost 添加到列表中。
最后您需要包含查询方案

这是我的 AppDelegate.m 文件。

``` #import "AppDelegate.h"

#import "RCTRootView.h"

#import <FBSDKCoreKit/FBSDKCoreKit.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  /**
   * Facebook SDK
   *
   **/
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];

  /**
   * Loading JavaScript code - uncomment the one you want.
   *
   * OPTION 1
   * Load from development server. Start the server from the repository root:
   *
   * $ npm start
   *
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */

  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

  /**
   * OPTION 2
   * Load from pre-bundled file on disk. The static bundle is automatically
   * generated by the "Bundle React Native code and images" build step when
   * running the project on an actual device or running the project on the
   * simulator in the "Release" build configuration.
   */

//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MyAwesomeApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

/**
 * Facebook SDK
 *
 **/

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}

@end

通过这些配置，我可以连接到我的服务器、登录用户等。

祝你好运！

让 React Native Facebook SDK 正常工作

Getting ReactNative FacebookSDK working

react-native

fbsdk

react-native-fbsdk