ReactNative 桥接原生原子组件(二)
在上文 ReactNative 桥接原生原子组件(一)中介绍了在 JS 层如何桥接原生层组件以及封装原生组件的属性,那如何封装原生组件的方法呢?
♦ 原生组件回调 JS 层方法
指的是一个事件发生在原生层,从原生层把事件传递到 JS 层
接下来要在上文的 demo 中添加一个小的需求,点击一个按钮,可以把头像在 圆角方形 和 圆形之间切换
1、在 layout_info_view.xml 布局文件中添加一个按钮,整体代码如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingHorizontal="16dp" android:paddingVertical="10dp" > <ImageView android:id="@+id/icon_avatar" android:layout_width="100dp" android:layout_height="100dp" /> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:layout_marginLeft="16dp" > <TextView android:id="@+id/txt_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:textColor="#e91e63" android:textSize="20sp" android:textStyle="bold" /> <TextView android:id="@+id/txt_desc" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:textSize="12sp" android:textStyle="bold" /> </LinearLayout> <TextView android:id="@+id/change_button" android:layout_width="30dp" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:text="切\n换\n形\n状" android:gravity="center" android:background="#3050ff" android:textColor="#ffffff" /> </LinearLayout>
2、回到 InfoView.java 文件,让 InfoView 类实现 View.OnClickListener 类并重写其 onClick 方法
3、给 InfoView 类添加两个私有属性,一个 shape 用于保存头像的形状,一个 url 用于保存头像的 url
4、在 setAvatar 方法中记录下当前的头像 url 并默认将头像形状设为圆形
5、重写 onClick 方法
重启项目,效果图如下
原生组件的切换功能已经实现了,接下来,需要把回调方法暴露给 JS 层
6、在 InfoView.java 的 onClick 方法中,需要把点击事件桥接给 JS 层
7、由于原生组件是通过 ViewManager 托管的,所以还需要在 InfoViewManager.java 中把方法暴露出去,这里可以通过快捷键 ALT + INSERT 选择 " Override Methods... ",重写 getExportedCustomBubblingEventTypeConstants 方法
8、回到 JS 层,给原生组件添加 onShapeChange 回调方法
重启项目,效果图如下
♦ 公开原生组件方法给 JS 层调用
指的是原生层的方法,通过 JS 层发起调用
1、在 JS 层向原生层发送命令的方法如下,表示发送什么命令给哪个原生组件,并携带了什么参数
2、在 InfoViewManager.java 中首先需要定义所有指令及其对应 code 的集合,这里需要重写 ViewManager 的 getCommandsMap 方法
3、重写 ViewManager 的 receiveCommand 方法,统一处理 JS 层发送过来的指令
4、在原生组件中 InfoView.java 中定义相应的 setShape 方法,用于切换头像的形状
重启项目,效果图如下(2秒后,头像变为圆角方形)