在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等傳值結束之后再執(zhí)行.
正確寫法應該是這樣子:
@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));
}
