React Native 之 onAfterUpdateTransaction 方法

在React Native下想要使用原生的控件并不难,在这里中就是封装的方法.

引语: 使用ReactProp注解,我们可以将JS的值传到Native中.但如果有多个ReactProp注解,我们应该让哪个注解最终生效呢.

例如: 封装一个Fresco的图片控件,有ReactProp注解的setUrl(图片地址)与setFadeDuration(淡入毫秒)两个方法

原生的显示方法应该是这样的

        SimpleDraweeView iv=new SimpleDraweeView(this);
        GenericDraweeHierarchyBuilder builder = null;
        GenericDraweeHierarchy hierarchy=
                builder.setFadeDuration(fadeTime)
                        .build();
        iv.setImageURI(Uri.parse(url));

所以封装的代码应该是这样的

    @ReactProp(name = "url")
    public void setUrl(SimpleDraweeView simpleDraweeView,String url){
        this.url=url;
        simpleDraweeView.setImageURI(Uri.parse(url));
    }

    @ReactProp(name = "fadeDuration")
    public void setFadeDuration(SimpleDraweeView simpleDraweeView,int fadeDuration){
        this.fadeDuration=fadeDuration;
        simpleDraweeView.setImageURI(Uri.parse(url));
    }

但有问题的是,simpleDraweeView.setImageURI 到底该放在哪的问题.

还好找到ViewManager源码,里面有个onAfterUpdateTransaction的方法,该方法就是在所有ReactProp等传值结束之后再执行.

正确写法应该是这样子:

    @ReactProp(name = "url")
    public void setUrl(SimpleDraweeView simpleDraweeView,String url){
        this.url=url;
        simpleDraweeView.setImageURI(Uri.parse(url));
    }

    @ReactProp(name = "fadeDuration")
    public void setFadeDuration(SimpleDraweeView simpleDraweeView,int fadeDuration){
        this.fadeDuration=fadeDuration;
        simpleDraweeView.setImageURI(Uri.parse(url));
    }

    @Override
    protected void onAfterUpdateTransaction(SimpleDraweeView view) {
        super.onAfterUpdateTransaction(view);
        view.setImageURI(Uri.parse(url));
    }