Getting ReactNative FacebookSDK working

问题

I'm trying to get the FBSDK running in an iOS ReactNative project.

I react-native init AwesomeProject to get a brand new project, follow the React Native FBSDK instructions on github, and I get an error in main.m:

thread 1:signal SIGABRT

A little Googling leads me here then here which has me add a LSApplicationQueriesSchemes key to my info.plist. Fixing that problem.

I then follow the Facebook app setup guide that has me add, among other things, an NSAppTransportSecurity key to my info.plist`. But then the app can't connect to the development server.

A little more googling and I find this page that says I don't need the NSAppTransportSecurity key so I take it out and the app runs. Whew, problem solved.

Back in the React Native FBSDK github page, I grab the first example in their usage section; the LoginButton. Copy it verbatim into my app. It runs. I click it. And...

thread 1:signal SIGABRT

Aaaah!

Has anyone gotten this to work?

回答1:

I have! After installing the SDK, you need to make sure all the configurations are property set. You also need to import the sdk in your AppDelegate.

Here are the relevant configs from my 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>

There are three sections:

You need to define your App Id and the display name.
You need to define the domains your app will have access, obviously facebook's domains, akamai and your own domains, I've included localhost to the list.
Finally you need to include the query schemes

Here's my AppDelegate.m file.

``` #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

With these configurations, I'm able to connect with my server, login users, etc.

Good luck!

来源：https://stackoverflow.com/questions/36904245/getting-reactnative-facebooksdk-working

标签

react-native

fbsdk

react-native-fbsdk