React Native中Facebook登录问题求助：现有代码无法正常运行

Hey there, let's figure out why your React Native Facebook Login isn't working. Let's start with fixing the obvious code issue, then walk through common setup pitfalls that might be blocking you.

First off, your onLoginFinished callback has a syntax mistake that's definitely breaking the functionality. Take a look:

Your current code snippet:

onLoginFinished={ (error, result) => {
  (error) { // ❌ Missing `if` here – invalid syntax!
    alert('Login failed with error: ' + result.error);
  } else if (result.isCancelled) {
    alert('Login was cancelled');
  } else {
    alert('Login was success...');
  }
}}

You forgot the if keyword for the first condition, and you're trying to access result.error when the error is actually stored in the error parameter. Here's the corrected version:

onLoginFinished={(error, result) => {
  if (error) { // ✅ Added `if` to fix syntax
    alert('Login failed with error: ' + error.message); // ✅ Use error.message for the error details
  } else if (result.isCancelled) {
    alert('Login was cancelled');
  } else {
    alert('Login was successful! Access Token: ' + result.accessToken.toString());
  }
}}

Even if the code looks right, missing or incorrect native setup is a super common culprit for Facebook Login issues.

• Make sure you've installed the package properly:

  # Using npm
  npm install react-native-fbsdk
  # Or yarn
  yarn add react-native-fbsdk
  

For iOS: #

• If you're using React Native version < 0.60, run react-native link react-native-fbsdk to link the native module (auto-linking works for 0.60+).
• Open your Info.plist and add your Facebook App ID and URL scheme:

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb{YOUR_APP_ID}</string> <!-- Replace {YOUR_APP_ID} with your actual ID -->
      </array>
    </dict>
  </array>
  <key>FacebookAppID</key>
  <string>{YOUR_APP_ID}</string>
  <key>FacebookDisplayName</key>
  <string>{YOUR_APP_DISPLAY_NAME}</string>
  

For Android: #

• Add your App ID and Client Token to android/app/src/main/res/values/strings.xml:

  <string name="facebook_app_id">{YOUR_APP_ID}</string>
  <string name="facebook_client_token">{YOUR_CLIENT_TOKEN}</string> <!-- Get this from Facebook Developer Console -->
  

• Update android/app/src/main/AndroidManifest.xml to include Facebook's activity and meta-data:

  <activity
      android:name="com.facebook.FacebookActivity"
      android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
      android:label="@string/app_name" />
  <meta-data
      android:name="com.facebook.sdk.ApplicationId"
      android:value="@string/facebook_app_id" />
  <meta-data
      android:name="com.facebook.sdk.ClientToken"
      android:value="@string/facebook_client_token" />
  

Your app needs to be properly configured on Facebook's end too:

• Go to your app dashboard in the Facebook Developer Console.
• Under Settings > Basic, confirm you've entered the correct Bundle ID (for iOS) and Package Name (for Android) that matches your project.
• Enable Facebook Login under Products > Facebook Login > Settings, and ensure the Valid OAuth Redirect URIs are set (for iOS, this should be fb{YOUR_APP_ID}://authorize; Android usually handles this automatically).
• If you're testing on real devices, make sure your test user accounts are added under Roles > Testers in the console.

You're requesting publishPermissions={['publish_action']} – but publish_action is a deprecated permission. Facebook now uses more specific permissions like publish_video or pages_manage_posts depending on what you need.

For basic login testing, try removing the publishPermissions prop entirely first. If you do need publish permissions later, make sure your app is approved for those permissions (only admins/testers can use unapproved permissions during development).

Facebook Login often behaves unpredictably on emulators/simulators. Test your app on a real iOS or Android device to rule out simulator-specific issues.

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