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:

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}}/>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom