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

时间:2017-02-17 19:10:13

标签: android facebook react-native

此问题仅适用于Facebook的React Native SDK ,因为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_id添加到strings.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')的{​​{1}}块中有dependenciesbuild.gradle。我的settings.gradle有:

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

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

我找到的一条线索是使用了检查器,它显示UnimplementedView嵌套在LoginButton内:

enter image description here

我搜索了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”的原生组件不存在

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

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

任何帮助都将受到超级赞赏!谢谢!

-Connie

1 个答案:

答案 0 :(得分:2)

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