Native UI Components (Android)

1.JAVA端的组件

创建 Manager和Package。

新建RCTMarqueeLabelManger类,并继承SimpleViewManager,并传入一个泛型RCTMarqueeLabel 

image.png

getName返回组件名称,在createViewInstance方法返回实例对象,可以在初始化对象时设置一些属性。


通过@ReactProp(或@ReactPropGroup)注释的setter方法来导出属性的设置。该方法有两个参数,Setter方法将视图更新(当前视图类型)作为第一个参数,第二个参数是要设置的属性值。方法的返回值类型必须为void,而且访问控制必须被声明为public。发送给JS的属性类型是根据setter的value参数的类型自动确定的,目前只支持以下类型的值:boolean,int,float,double,string,Boolean,Integer,ReadableArray,ReadableMa.

image.png

@ReactProp注解必须包含一个字符串类型的参数name。这个参数指定了对应属性在JavaScript端的名字。


创建RCTMarqueeLabelPackage并注册到ReactNativeHost

image.png

image.png

image.png

JAVA端结构

实现JS端的组件

新建自定义的js文件    HXBMarqueeLabel.js

组件使用的模块是requireNativeComponent。

requireNativeComponent接受两个参数,第一个参数是原生视图的名字(JAVA层RCTMarqueeLabelManger$getName的值),而第二个参数是一个描述组件接口的对象。最后通过module.exports导出提供给其他组件使用。

image.png

然后就可以在js中引用image.png

当前还只实现使用native层的视图组件,后面将学习如何处理事件,获取native层的消息

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容