在 React Native 上为 android 创建自定义 UI 组件失败。应用程序崩溃

Question

因为 Facebook 登录按钮是原生可用的，所以我想要一个适用于 Android 的 React Native 包装器组件。所以，我试着写它。但是应用程序甚至在开始之前就崩溃了。 我的 github 存储库是： https://github.com/lalith26/react-native-fb-login-android

我做了以下事情：

1. 我为 LoginButton facebook 小部件创建了管理器：

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/FBLoginButtonManager.java

1. 我创建了一个扩展 MainReactPackage 的 ReactPackage：

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/FBLoginButtonReactPackage.java

1. 我在 MainActivity 中添加了新的 ReactPackage：

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/src/main/java/com/fbloginbutton2/MainActivity.java#L29

4. 我包含了 facebook login sdk 的 gradle 依赖项

https://github.com/lalith26/react-native-fb-login-android/blob/master/android/app/build.gradle#L28

5. 我做了JS组件包装了Native Component：

https://github.com/lalith26/react-native-fb-login-android/blob/master/fblogin.js

6. 终于用到了JS组件：

https://github.com/lalith26/react-native-fb-login-android/blob/master/index.android.js#L21

我浏览了网络，发现propTypes是强制传递的。我也试过了。但是应用程序在启动时崩溃了。我看不到任何日志。因此，我无法找到问题的实际原因。 我为按钮尝试了相同的步骤，效果很好。

是不是我做错了什么。请帮忙..

我通过 logcat 访问了模拟器的日志。它显示：

E/AndroidRuntime(2550)：进程：com.fbloginbutton2，PID：2550 E/AndroidRuntime（2550）：java.lang.ExceptionInInitializerError E/Android 运行时（2550）：在 com.fbloginbutton2.FBLoginButtonManager.createViewInstance(FBLoginButtonManager.java:29) E/Android 运行时（2550）：在 com.fbloginbutton2.FBLoginButtonManager.createViewInstance(FBLoginButtonManager.java:15) E/Android 运行时（2550）：在 com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:41) E/Android 运行时（2550）：在 com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:172) E/Android 运行时（2550）：在 com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:137) E/Android 运行时（2550）：在 com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:574) E/Android 运行时（2550）：在 com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:622) E/Android 运行时（2550）：在 com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32) E/Android 运行时（2550）：在 com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:114) E/Android 运行时（2550）：在 android.view.Choreographer$CallbackRecord.run(Choreographer.java:765) E/Android 运行时（2550）：在 android.view.Choreographer.doCallbacks(Choreographer.java:580) E/Android 运行时（2550）：在 android.view.Choreographer.doFrame(Choreographer.java:549) E/Android 运行时（2550）：在 android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753) E/Android 运行时（2550）：在 android.os.Handler.handleCallback(Handler.java:739) E/AndroidRuntime( 2550): 在 android.os.Handler.dispatchMessage(Handler.java:95) E/AndroidRuntime(2550): 在 android.os.Looper.loop(Looper.java:135) E/Android 运行时（2550）：在 android.app.ActivityThread.main(ActivityThread.java:5221) E/AndroidRuntime(2550): 在 java.lang.reflect.Method.invoke(Native 方法）E/AndroidRuntime（2550）：在 java.lang.reflect.Method.invoke(Method.java:372) E/AndroidRuntime( 2550): 在 com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899) E/Android 运行时（2550）：在 com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694) E/AndroidRuntime（2550）：由：空 E/AndroidRuntime（2550）：在 com.facebook.internal.Validate.sdkInitialized(Validate.java:99) E/Android 运行时（2550）：在 com.facebook.FacebookSdk.getCallbackRequestCodeOffset(FacebookSdk.java:735) E/Android 运行时（2550）：在 com.facebook.internal.CallbackManagerImpl$RequestCodeOffset.toRequestCode(CallbackManagerImpl.java:109) E/Android 运行时（2550）：在 com.facebook.login.widget.LoginButton.(LoginButton.java:58) E/AndroidRuntime（2550）：...还有 21 个 W/ActivityManager（1327）：
强制完成活动 com.fbloginbutton2/.MainActivity E/EGL_emulation（1373）：tid 1373：eglCreateSyncKHR（1181）：错误 0x3004 (EGL_BAD_ATTRIBUTE)

Answer 1

我发现很难找到关于这个问题的简单示例或文档，所以这里是我的代码示例，扩展了 KenBurnsView (https://github.com/flavioarfaria/KenBurnsView)，我希望这个示例简单而有用：

KenBurnsViewManager.Java：

import com.flaviofaria.kenburnsview.KenBurnsView;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ReactProp;

import java.io.InputStream;

import android.graphics.drawable.Drawable;
import android.util.Log;

public class KenBurnsViewManager extends SimpleViewManager<KenBurnsView> {

  public static final String REACT_CLASS = "KenBurnsView";
  private ThemedReactContext ctx;

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  protected KenBurnsView createViewInstance(ThemedReactContext context) {
    ctx = context;
    return new KenBurnsView(context);
  }

  @ReactProp(name = "source")
  public void setSource(KenBurnsView view, String source) {
    try {
      InputStream ims = ctx.getAssets().open("images/" + source);
      Drawable d = Drawable.createFromStream(ims, null);
      view.setImageDrawable(d);
    } catch (Exception ex) {
      Log.e("KenBurnsView", "setSource", ex);
    }
  }
}

KenBurnsViewPackage.Java：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Collections;
import java.util.List;
import java.util.Arrays;
import java.util.ArrayList;

public class KenBurnsViewPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();

        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new KenBurnsViewManager()
        );
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }
}

更新 MainActivity.Java：

mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new KenBurnsViewPackage()) // <- add package
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

更新android/app/build.gradle：

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:0.16.+"
    compile "com.flaviofaria:kenburnsview:1.0.6"
}

KenBurnsView.js：

var { requireNativeComponent, PropTypes, View } = require('react-native');

var iface = {
  propTypes: {
    ...View.propTypes,
    source: PropTypes.string,
  },
};

module.exports = requireNativeComponent('KenBurnsView', iface);

就是这样，现在可以添加新的自定义 KenBurnsView 组件，例如：

var KenBurnsView = require('./KenBurnsView');
.
.
.
<KenBurnsView source={'image.jpg'} style={{width:null, height: 300}}/>

Answer 2

你能看看这个更新的文档 PR https://github.com/facebook/react-native/pull/3078/files

还有这个问题 https://github.com/facebook/react-native/issues/2856