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 方法