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

引語: 使用ReactProp注解,我們可以將JS的值傳到Native中.但如果有多個ReactProp注解,我們應(yīng)該讓哪個注解最終生效呢.

例如: 封裝一個Fresco的圖片控件,有ReactProp注解的setUrl(圖片地址)與setFadeDuration(淡入毫秒)兩個方法

原生的顯示方法應(yīng)該是這樣的

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

所以封裝的代碼應(yīng)該是這樣的

    @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等傳值結(jié)束之后再執(zhí)行.

正確寫法應(yīng)該是這樣子:

    @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));
    }