Facebook React Native SDK LoginButton 在 Android 中呈现带红色边框的 UnimplementedView

Posted 2023-03-17

【中文标题】Facebook React Native SDK LoginButton 在 Android 中呈现带红色边框的 UnimplementedView

【英文标题】：Facebook React Native SDK LoginButton renders UnimplementedView with red border in Android

【发布时间】：2017-02-17 19:10:13

【问题描述】：

这个问题与 Facebook 的 React Native SDK 相关并且仅在 android 中，因为 ios 呈现 LoginButton 很好：

在 Android 中，我看到的是这个：

我在react-native 0.41.2。我关注了the configurations for React-Native v0.30+。我也完成了所有the configurations in Android for Facebook SDK。

我发现similar thread for iOS 有同样的问题。解决方案是确保 SDK 在 iOS 项目中链接。我已经检查了好几次，以确保 SDK 已链接到 Android 项目中。我觉得我正在服用疯狂的药丸；这可能是很小的事情，但我似乎看不到它。

我的MainActivity.java 是：

package com.myapp;

import com.facebook.react.ReactActivity;
import android.content.Intent;
import android.os.Bundle;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;

import java.util.Arrays;
import java.util.List;


public class MainActivity extends ReactActivity 

    CallbackManager mCallbackManager = MainApplication.getCallbackManager();
    /**
     * Returns the name of the main component registered from javascript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() 
        return "MyApp";
    

//    @Override
    protected List<ReactPackage> getPackages() 
        mCallbackManager = new CallbackManager.Factory().create();
        ReactPackage packages[] = new ReactPackage[]
                new MainReactPackage(),
                new FBSDKPackage(mCallbackManager),
        ;
        return Arrays.<ReactPackage>asList(packages);
    

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) 
        super.onActivityResult(requestCode, resultCode, data);
        mCallbackManager.onActivityResult(requestCode, resultCode, data);
    

我的MainApplication.java 是：

package com.myapp;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import io.realm.react.RealmReactPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;

public class MainApplication extends Application implements ReactApplication 
  private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

  protected static CallbackManager getCallbackManager() 
    return mCallbackManager;
  

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) 
    @Override
    public boolean getUseDeveloperSupport() 
      return BuildConfig.DEBUG;
    

    @Override
    protected List<ReactPackage> getPackages() 
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RealmReactPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    
  ;

  @Override
  public ReactNativeHost getReactNativeHost() 
    return mReactNativeHost;
  

  @Override
  public void onCreate() 
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  

我已将facebook_app_id 添加到strings.xml。我在AndroidManifest.xml 中有<uses-permission android:name="android.permission.INTERNET" /> 和<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>。我的应用程序的build.gradle 在dependencies 块中有compile project(':react-native-fbsdk')。我的settings.gradle 有：

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

软件包名称与我保存在 FB 开发者控制台中的名称一致。我已经生成并上传了开发密钥哈希。我觉得我已经筋疲力尽了——你读到这里可能已经筋疲力尽了，我真的很感谢你！

我发现的一个线索是使用检查器，它显示 UnimplementedView 嵌套在 LoginButton 中：

我搜索了UnimplementedView，但没有任何结果。在react-native log-android 中，我收到以下错误：

02-17 09:37:10.877 2977 3007 W ReactNativeJS：警告：“RCTFBLikeView”的本机组件不存在 02-17 09:37:10.878 2977 3007 W ReactNativeJS：警告：“RCTFBLoginButton”的本机组件不存在 02-17 09:37:10.878 2977 3007 W ReactNativeJS：警告：“RCTFBSendButton”的本机组件不存在 02-17 09:37:10.878 2977 3007 W ReactNativeJS：警告：“RCTFBShareButton”的本机组件不存在

不过，我还没有在 *** 上找到任何与 Android 相关的解决方案。我只找到了an iOS thread here，这听起来又像是一个链接问题。

我猜我以某种方式错误地链接了 SDK，但我不知道我在哪里搞砸了。

任何帮助将不胜感激！！谢谢！

-康妮

【参考方案1】：

72 小时后。在 Android 模拟器中杀死并重新启动应用程序。登录按钮神奇地重新出现！不知道如何或为什么。希望只是浪费我的时间。

【讨论】：

你为我节省了大量时间。

很高兴我的回答对您有所帮助！