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

标签 android facebook react-native

此问题与 Facebook 的 React Native SDK 相关并且仅适用于 Android,因为 iOS 呈现 LoginButton很好:

iOS renders LoginButton fine

在 Android 中,我看到的是:

enter image description here

我在 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_idstrings.xml .我有<uses-permission android:name="android.permission.INTERNET" /><meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>AndroidManifest.xml .我有compile project(':react-native-fbsdk')dependencies阻止我的应用程序的 build.gradle .我的settings.gradle有:

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

包名称与我在 FB 的开发者控制台中保存的名称匹配。我已经生成并上传了开发 key 哈希。我觉得我已经筋疲力尽了——读到这里可能已经让你筋疲力尽了,我真的很感谢你!!

我发现的一个线索是使用检查器,它向我显示了 UnimplementedView嵌套在 LoginButton 内:

enter image description here

我搜索了 UnimplementedView但没有任何结果。在 react-native log-android ,我得到这些错误:

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

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

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

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

-康妮

最佳答案

72 小时后。在 Android 模拟器中终止并重新启动该应用程序。登录按钮神奇地出现了!不知道如何或为什么。希望只有我的时间浪费在这上面。

关于android - Facebook React Native SDK LoginButton 在 Android 中呈现带有红色边框的 UnimplementedView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42305685/

相关文章:

javascript - react 原生 : Highlight component/area by darkening the rest

java - 操作栏选项卡必须有回调 addTab 错误

android - 使用 android studio 更新我的 android 应用程序

Android AudioRecord 示例

android - 应用程序仅在 Lollipop 设备上崩溃

facebook - 对多个域的支持不像宣传的那样有效

android - 使用 LocalDate 而不是日月年的 DatepickerDialog

facebook - 如何获得一个 Facebook 访问 token ,该 token 具有足够的权限来获取标记您的帖子?

react-native - React Native 有没有办法等到函数完成?

javascript - Firebase user.sendEmailVerification() 不是函数