最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

ReactNative 桥接原生原子组件（一） 今日热闻

来源：博客园

♦ 实现一个原生自定义组件 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、编写一个简单的布局，用于展示个人信息

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 文件中添加以下四个权限 （如已添加，可跳过）

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按钮安装依赖

关键词：