526互联

ReactNative 桥接原生原子组件（二）

发布时间 2023-04-28 17:34:36作者: rogerwu

在上文 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秒后，头像变为圆角方形）