React Native集成Facebook登录编译报错：Android样式资源缺失

Hey there, let's get this Facebook login issue sorted out for you! Looking at your error logs and code, the core problem is mismatched Android SDK, Build Tools, and dependency versions—those missing resource errors are a dead giveaway that your app's configuration isn't aligned with what the react-native-fbsdk library expects.

Let's Break Down the Error Clues #

Your log clearly points to version conflicts:

• The Android Gradle Plugin 3.1.0 requires a minimum Build Tools version of 27.0.3, but your project was trying to use 26.0.2
• Missing resources like android:style/TextAppearance.Material.Widget.Button.Borderless.Colored and android:attr/colorError come from using an older SDK version that doesn't support these newer attributes

Step-by-Step Fixes #

1. Update Your App Module's build.gradle

Open myProj/android/app/build.gradle (this is the app submodule build file, not the top-level one) and make these critical changes:

• Set compileSdkVersion and targetSdkVersion to 27 (or higher, matching an SDK version you have installed)
• Remove the buildToolsVersion line entirely—Android Gradle Plugin 3.1.0 will automatically use the correct compatible version
• Replace any obsolete compile keywords with implementation in your dependencies block

Example snippet for the app build.gradle:

android {
    compileSdkVersion 27
    targetSdkVersion 27

    // Remove the line: buildToolsVersion '26.0.2'

    defaultConfig {
        applicationId "com.myproj"
        minSdkVersion 16 // Keep your existing minSdk if needed
        // ... other existing configs
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:27.0.2"
    implementation "com.facebook.react:react-native:+" // Pulls from your node_modules
    implementation project(':react-native-fbsdk')
}

2. Tweak the Top-Level build.gradle

Your existing top-level config is mostly okay, but add Google's Maven repository to avoid missing dependency issues:

buildscript {
    repositories {
        jcenter()
        google() // Add this line
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.0'
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        google() // Add this line too
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

3. Clean Gradle Cache and Rebuild

Old cached files are often the culprit behind weird version conflicts. Run these commands in your project's android directory:

./gradlew clean
cd ..
react-native run-android

4. Clean Up Redundant Code

Looking at your MainApplication.java, there's a duplicate import line you can remove (it doesn't cause the current error, but keeps things tidy):

// Remove one of these duplicate lines
import com.facebook.reactnative.androidsdk.FBSDKPackage;

Why This Works #

By aligning your SDK, Build Tools, and dependency versions, you're ensuring that react-native-fbsdk can access all the Android resources it needs. The missing styles and attributes are part of Android API 26+, so upgrading your compile/target SDK versions directly fixes those "not found" errors.

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