React Native 桥接组件封装原生组件属性

自定义属性可以让组件具备更多的灵活性，所以有必要在JS 层通过自定义属性动态传值。

一、添加原生组件属性

因为 ViewManager 管理了整个组件的行为，所以要新增组件属性也需要在这里面（如 InfoViewManager）进行定义。

1、在InfoViewManager 中定义一个 setAvatar 方法。

@ReactProp 是 React Native 中的注解，用于标记一个方法，该方法用于处理从 JavaScript 到原生组件传递的属性（props）的更新。

被 @ReactProp 注解标记的方法应该接受两个参数，第一个参数是原生组件实例，第二个参数是要更新的属性的值。React Native 框架会负责确保传递的属性值与方法的第二个参数类型匹配。

上图中 setAvatar 方法被 @ReactProp 注解标记，表示它用于处理 name 为 “avatar” 的属性的更新。

2、这里需要从原始的视图中拿到组件的实例去执行更新，所以需要在 InfoView 中定义一个方法去更新组件的值。

到这里就完成了头像 avatar 这个属性的添加。

如果没有 Glide 这个类，可在 build.gradle 文件中添加一行代码，重新下载依赖项，运行项目

implementation("com.github.bumptech.glide:glide:4.2.0")

3、以此类推，再给组件添加一个 desc属性

二、在 JS 层使用原生组件属性

1、修改公共组件 NativeInfoView 传入两个自定义属性 avatar 和 desc

2、在业务组件里使用

效果如图：

相关链接：
React Native 桥接原生实现 JS 调用原生方法
React Native 桥接原生常量
React Native 桥接原生原子组件