React Native封装原生UI组件

我的博客原文地址
在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