我的博客原文地址
在React Native开发过程中,有时我们想要使用原生的一个UI组件或者是JS比较难以实现的动画效果时,我们可以在React Naitve应用程序中封装和植入已有的原生组件。
比如开源项目Lottie在Android上能够非常简单的实现一些复杂的动画效果,如果我们想在JS中也实现这样的效果呢?很简单,我们可以自己构建一个原生UI组件。
接下来就以此为例来进行介绍。Lottie官方已经提供了React Native版本的Lottie了,但这里我们仅仅是做为例子来介绍。
官方中文文档
先看一下效果图:
封装组件
创建ViewManager的子类
创建LottieViewManager
类,并实现getName()
和createViewInstance
方法:
public class LottieViewManager extends SimpleViewManager<LottieAnimationView> {
private static final String REACT_CLASS = "LottieAnimationView";
@Override
public String getName() {
return REACT_CLASS;
}
@Override
protected LottieAnimationView createViewInstance(ThemedReactContext reactContext) {
return new LottieAnimationView(reactContext);
}
}
导出属性的设置方法
要导出给JavaScript使用的属性,需要申明带有@ReactProp
(或@ReactPropGroup
)注解的设置方法。方法的第一个参数是要修改属性的视图实例,第二个参数是要设置的属性值。方法的返回值类型必须为void
,而且访问控制必须被声明为public
。JavaScript所得知的属性类型会由该方法第二个参数的类型来自动决定。支持的类型有:boolean
, int
, float
, double
, String
, Boolean
, Integer
, ReadableArray
, ReadableMap
。
@ReactProp
注解必须包含一个字符串类型的参数name
。这个参数指定了对应属性在JavaScript端的名字。
除了name
,@ReactProp
注解还接受这些可选的参数:defaultBoolean
, defaultInt
, defaultFloat
。这些参数必须是对应的基础类型的值(也就是boolean
, int
, float
),这些值会被传递给setter
方法,以免JavaScript端某些情况下在组件中移除了对应的属性。注意这个”默认”值只对基本类型生效,对于其他的类型而言,当对应的属性删除时,null
会作为默认值提供给方法。
使用@ReactPropGroup
来注解的设置方法和@ReactProp
不同。请参见@R