ReactNative 桥接原生原子组件（一）-526互联

♦ 实现一个原生自定义组件 View

1、打开 Android Studio 编辑器，在 android > app > src > main > java > com.rndemo (项目包名) 下新建一个 view 包

2、在 view 包下新建一个 InfoView 类，这个就是要提供给 JS 层的原生组件

3、这个 InfoView 类需要继承 LinearLayout 类，并选择 Choose Super Class Constructors 弹窗中的第 1 个构造函数

4、在 android > app > src > main > res 下新建一个 layout 目录

5、在新建的 layout 目录下新建一个 layout_info_view.xml 布局文件

6、在右上角视图模式那里选择 Split 模式，可以同时显示 Code 和 Design 窗口

7、编写一个简单的布局，用于展示个人信息

<?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"
        android:src="@mipmap/ic_launcher_round"
    />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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:text="托尼斯塔克"
            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:text="大家好，我是托尼斯塔克，我已经不是超级英雄了，我只是一个帅气的亿万富翁，但是，我经常忍不住说出那句口头禅 &quot;I am Iron man.&quot;"
            android:textColor="#fff"
            android:background="#3050ff"
            android:textSize="12sp"
            android:textStyle="bold"
            />
    </LinearLayout>

</LinearLayout>

8、将布局添加到自定义的 InfoView 中

♦ 创建 ViewManager，用于接管原生自定义组件的属性和行为，并把 ViewManager 注册到 ReactPackage 中

在上一篇 ReactNative 桥接原生组件中提到过 原生组件是通过 RnDemoPackage 的 createViewManagers 方法注册的，最后通过 MainApplication 注册到整个应用中

从图中可以看到 createViewManagers 现在返回的还是一个空的集合，所以，需要先创建 ViewManager，用于托管前面自定义的那个原生组件 InfoView

1、在 android > app > src > main > java > com.rndemo (项目包名) 下新建一个 viewmanager 包，然后，在这个包下新建一个 InfoViewManager 类，该类需要继承 SimpleViewManager 抽象类并重写其方法

2、注册 InfoViewManager 到 ReactPackage 中

♦ 在 JS 层导入原生组件，并封装导出 JS 模块

1、新建一个 NativeInfoView 文件用于引用原生组件，将其提供给 JS 层的业务组件使用

2、调用上一步封装好的组件

重启项目以后，运行效果如下图

♦ 封装原生组件的属性

1、由于 ViewManager 托管了原生组件的属性和方法，所以，先回到 InfoViewManager.java 文件中添加设置属性的方法

2、回到 InfoView.java 文件，获取要修改属性的布局组件实例

3、分别添加修改属性的方法，供 ViewManager 调用

4、回到 JS 层，添加引用原生组件时需要传入的三个属性：avatar, name, desc

5、在业务组件中传入指定的属性值

重启项目以后，运行效果如下图

6、原生组件添加的属性全部生效以后，就可以删除布局文件 layout_info_view.xml 中的组件默认值

7、同时在 InfoViewManager.java 中的 setAvatar 方法中为 Image 组件添加一个默认值

8、回到 JS 层，再引用一个原生组件并将其 avatar 属性值设为空字符串

重启项目以后，运行效果如下图

♥ 补充 Android Studio 安装 Glide 的方法

Glide 是一款快速高效的 Android 图像加载库，注重于平滑的滚动。支持拉取、解码和展示视频快照、图片和 GIF 动画。

官网地址：https://github.com/bumptech/glide

1、权限

Glide 一般情况下需要向 AndroidManifest.xml 文件中添加以下四个权限（如已添加，可跳过）

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    
    
</manifest>

INTERNET：访问网络权限，有了这个权限才能从网络上在线加载图片

ACCESS_NETWORK_STATE：访问网络状态权限，不是必须的权限，但是，加上可以处理片状网络（flaky network）和飞行模式

READ_EXTERNAL_STORAGE：阅读本地 SD 卡权限，从本地文件夹或 DCIM 或图库中加载图片

WRITE_EXTERNAL_STORAGE：将 Glide 缓存存储到 SD 卡上需要这个权限

添加的位置在 android > app > src > main > AndroidManifest.xml

2、Android Studio 在线依赖

Glide 支持在线依赖，在 android > app > build.gradle 文件中的 dependencies 属性下增加两行代码

implementation 'com.github.bumptech.glide:glide:4.13.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'

保存文件后，点击文件右上角的 Sync Now 按钮安装依赖

reactnative wordpress案例ignite