自定义属性可以让组件具备更多的灵活性,所以有必要在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 桥接原生原子组件