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

前端之家收集整理的这篇文章主要介绍了reactjs – 在React Native上为android创建自定义UI组件失败.应用程序崩溃前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
由于Facebook登录按钮本身可用,我想要一个适用于 Android的React Native包装器组件.所以,我试着写它.但应用程序甚至在开始之前就崩溃了.
我的github存储库是:
https://github.com/lalith26/react-native-fb-login-android

我做了以下事情:

>我为LoginButton facebook小部件创建了Manager:

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

>我创建了一个扩展MainReactPackage的ReactPackage:

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

>我在MainActivity中添加了新的ReactPackage:

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

>我包含了facebook登录sdk的gradle依赖

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

>我使JS组件包装了Native组件:

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

>最后我使用了JS组件:

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

我通过网络阅读并发现必须传递propTypes.我也试过了.但应用程序在启动时崩溃了.我无法看到任何日志.所以,我无法找到问题的实际原因.
我为一个按钮尝试了相同的一组步骤,它工作正常.

有什么我只是做错了.请帮忙..

我通过logcat访问了模拟器的日志.表明:

E/AndroidRuntime( 2550): Process: com.fbloginbutton2,PID: 2550
E/AndroidRuntime( 2550): java.lang.ExceptionInInitializerError
E/AndroidRuntime( 2550): at
com.fbloginbutton2.FBLoginButtonManager.createViewInstance(FBLoginButtonManager.java:29)
E/AndroidRuntime( 2550): at
com.fbloginbutton2.FBLoginButtonManager.createViewInstance(FBLoginButtonManager.java:15)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:41)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:172)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:137)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:574)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:622)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
E/AndroidRuntime( 2550): at
com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:114)
E/AndroidRuntime( 2550): at
android.view.Choreographer$CallbackRecord.run(Choreographer.java:765)
E/AndroidRuntime( 2550): at
android.view.Choreographer.doCallbacks(Choreographer.java:580)
E/AndroidRuntime( 2550): at
android.view.Choreographer.doFrame(Choreographer.java:549)
E/AndroidRuntime( 2550): at
android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753)
E/AndroidRuntime( 2550): at
android.os.Handler.handleCallback(Handler.java:739) E/AndroidRuntime(
2550): at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime( 2550): at android.os.Looper.loop(Looper.java:135)
E/AndroidRuntime( 2550): at
android.app.ActivityThread.main(ActivityThread.java:5221)
E/AndroidRuntime( 2550): at java.lang.reflect.Method.invoke(Native
Method) E/AndroidRuntime( 2550): at
java.lang.reflect.Method.invoke(Method.java:372) E/AndroidRuntime(
2550): at
com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
E/AndroidRuntime( 2550): at
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
E/AndroidRuntime( 2550): Caused by: null E/AndroidRuntime( 2550): at
com.facebook.internal.Validate.sdkInitialized(Validate.java:99)
E/AndroidRuntime( 2550): at
com.facebook.FacebookSdk.getCallbackRequestCodeOffset(FacebookSdk.java:735)
E/AndroidRuntime( 2550): at
com.facebook.internal.CallbackManagerImpl$RequestCodeOffset.toRequestCode(CallbackManagerImpl.java:109)
E/AndroidRuntime( 2550): at
com.facebook.login.widget.LoginButton.(LoginButton.java:58)
E/AndroidRuntime( 2550): … 21 more W/ActivityManager( 1327):
Force finishing activity com.fbloginbutton2/.MainActivity
E/EGL_emulation( 1373): tid 1373: eglCreateSyncKHR(1181): error 0x3004
(EGL_BAD_ATTRIBUTE)

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

KenBurnsViewManager.Java:

  1. import com.flaviofaria.kenburnsview.KenBurnsView;
  2.  
  3. import com.facebook.react.uimanager.SimpleViewManager;
  4. import com.facebook.react.uimanager.ThemedReactContext;
  5. import com.facebook.react.uimanager.ReactProp;
  6.  
  7. import java.io.InputStream;
  8.  
  9. import android.graphics.drawable.Drawable;
  10. import android.util.Log;
  11.  
  12. public class KenBurnsViewManager extends SimpleViewManager<KenBurnsView> {
  13.  
  14. public static final String REACT_CLASS = "KenBurnsView";
  15. private ThemedReactContext ctx;
  16.  
  17. @Override
  18. public String getName() {
  19. return REACT_CLASS;
  20. }
  21.  
  22. @Override
  23. protected KenBurnsView createViewInstance(ThemedReactContext context) {
  24. ctx = context;
  25. return new KenBurnsView(context);
  26. }
  27.  
  28. @ReactProp(name = "source")
  29. public void setSource(KenBurnsView view,String source) {
  30. try {
  31. InputStream ims = ctx.getAssets().open("images/" + source);
  32. Drawable d = Drawable.createFromStream(ims,null);
  33. view.setImageDrawable(d);
  34. } catch (Exception ex) {
  35. Log.e("KenBurnsView","setSource",ex);
  36. }
  37. }
  38. }

KenBurnsViewPackage.Java:

  1. import com.facebook.react.ReactPackage;
  2. import com.facebook.react.bridge.JavaScriptModule;
  3. import com.facebook.react.bridge.NativeModule;
  4. import com.facebook.react.bridge.ReactApplicationContext;
  5. import com.facebook.react.uimanager.ViewManager;
  6.  
  7. import java.util.Collections;
  8. import java.util.List;
  9. import java.util.Arrays;
  10. import java.util.ArrayList;
  11.  
  12. public class KenBurnsViewPackage implements ReactPackage {
  13. @Override
  14. public List<NativeModule> createNativeModules(
  15. ReactApplicationContext reactContext) {
  16.  
  17. List<NativeModule> modules = new ArrayList<>();
  18.  
  19. return modules;
  20. }
  21.  
  22. @Override
  23. public List<ViewManager> createViewManagers(
  24. ReactApplicationContext reactContext) {
  25. return Arrays.<ViewManager>asList(
  26. new KenBurnsViewManager()
  27. );
  28. }
  29.  
  30. @Override
  31. public List<Class<? extends JavaScriptModule>> createJSModules() {
  32. return Collections.emptyList();
  33. }
  34. }

更新MainActivity.Java:

  1. mReactInstanceManager = ReactInstanceManager.builder()
  2. .setApplication(getApplication())
  3. .setBundleAssetName("index.android.bundle")
  4. .setJSMainModuleName("index.android")
  5. .addPackage(new MainReactPackage())
  6. .addPackage(new KenBurnsViewPackage()) // <- add package
  7. .setUseDeveloperSupport(BuildConfig.DEBUG)
  8. .setInitialLifecycleState(LifecycleState.RESUMED)
  9. .build();

更新android / app / build.gradle:

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

KenBurnsView.js:

  1. var { requireNativeComponent,PropTypes,View } = require('react-native');
  2.  
  3. var iface = {
  4. propTypes: {
  5. ...View.propTypes,source: PropTypes.string,},};
  6.  
  7. module.exports = requireNativeComponent('KenBurnsView',iface);

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

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

猜你在找的React相关文章