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