React Native集成Facebook登录失败：'logInWithReadPermissions'未定义

Hey there, let's work through this frustrating Facebook login error you're hitting. Even if you think you've followed all the steps, small oversights in setup often cause this undefined property issue. Let's break down fixes focused on the files you mentioned: AppDelegate.m, Info.plist, and App.js.

1. First: Verify You're Using the Right Dependency & It's Linked #

The old react-native-fbsdk package is deprecated—chances are you might be using an outdated version, or the package isn't properly linked.

• Install the maintained package:

  npm install react-native-fbsdk-next
  # or
  yarn add react-native-fbsdk-next
  

• For React Native 0.60+, auto-linking should handle most setup, but iOS requires a pod install:

  cd ios && pod install && cd ..
  

• If you're on an older RN version, double-check manual linking steps (though auto-linking is preferred now).

2. Fix AppDelegate.m Configuration (iOS) #

Missing or incorrect initialization here will break the SDK connection entirely.

• Add the FBSDK import at the top:

  #import <FBSDKCoreKit/FBSDKCoreKit.h>
  

• Update the didFinishLaunchingWithOptions method to initialize the SDK:

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    // ... keep your existing code here
    [[FBSDKApplicationDelegate sharedInstance] application:application
                         didFinishLaunchingWithOptions:launchOptions];
    return YES;
  }
  

• Add the URL handling method (critical for login redirects):

  - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                  openURL:url
                                                        sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                               annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                   ];
    return handled;
  }
  

3. Validate Info.plist Settings #

Typos or missing entries here will prevent the SDK from recognizing your app.

Open your Info.plist (right-click > Open As > Source Code) and add these entries, replacing placeholders with your Facebook app details:

<!-- Facebook App ID & Display Name -->
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_DISPLAY_NAME</string>

<!-- URL Scheme for login redirects -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_FACEBOOK_APP_ID</string> <!-- Prefix your App ID with "fb" -->
    </array>
  </dict>
</array>

<!-- Allow opening Facebook app -->
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

Double-check that your App ID and Display Name match exactly what's in your Facebook Developer Dashboard.

4. Fix App.js Login Code (The Most Likely Culprit!) #

The error message mentions logInWithReadPermissions—this method was removed in newer versions of react-native-fbsdk-next. You're probably using an outdated code snippet.

• Import the correct modules:

  import { LoginManager, AccessToken } from 'react-native-fbsdk-next';
  

• Use the updated logInWithPermissions method instead:

  const handleFacebookLogin = async () => {
    try {
      // Request permissions (public_profile, email are common)
      const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
      
      if (result.isCancelled) {
        console.log('User cancelled login flow');
      } else {
        // Get the access token after successful login
        const accessTokenData = await AccessToken.getCurrentAccessToken();
        console.log('Login successful:', accessTokenData);
        // Use this token to authenticate with your backend
      }
    } catch (error) {
      console.error('Login failed:', error);
    }
  };
  

5. Final Troubleshooting Steps #

If you still see the error:

• Clear caches:
  • Run npm start -- --reset-cache for Metro
  • In Xcode, go to Product > Clean Build Folder to clear iOS derived data
• Restart your Metro server and Xcode
• Confirm your Facebook Developer Dashboard has your app's iOS Bundle ID listed correctly, and Facebook Login is enabled for the app.

内容的提问来源于stack exchange，提问作者Rafael Augusto