自定義屬性可以讓組件具備更多的靈活性，所以有必要在JS 層通過自定義屬性動態(tài)傳值。
一、添加原生組件屬性
因?yàn)?ViewManager 管理了整個(gè)組件的行為，所以要新增組件屬性也需要在這里面（如 InfoViewManager）進(jìn)行定義。
1、在InfoViewManager 中定義一個(gè) setAvatar 方法。
@ReactProp 是 React Native 中的注解，用于標(biāo)記一個(gè)方法，該方法用于處理從 JavaScript 到原生組件傳遞的屬性（props）的更新。
被 @ReactProp 注解標(biāo)記的方法應(yīng)該接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是原生組件實(shí)例，第二個(gè)參數(shù)是要更新的屬性的值。React Native 框架會負(fù)責(zé)確保傳遞的屬性值與方法的第二個(gè)參數(shù)類型匹配。
上圖中 setAvatar 方法被 @ReactProp 注解標(biāo)記，表示它用于處理 name 為 “avatar” 的屬性的更新。
2、這里需要從原始的視圖中拿到組件的實(shí)例去執(zhí)行更新，所以需要在 InfoView 中定義一個(gè)方法去更新組件的值。
到這里就完成了頭像 avatar 這個(gè)屬性的添加。
如果沒有 Glide 這個(gè)類，可在
build.gradle文件中添加一行代碼，重新下載依賴項(xiàng)，運(yùn)行項(xiàng)目
implementation("com.github.bumptech.glide:glide:4.2.0")
3、以此類推，再給組件添加一個(gè) desc屬性
二、在 JS 層使用原生組件屬性
1、修改公共組件 NativeInfoView 傳入兩個(gè)自定義屬性 avatar 和 desc
2、在業(yè)務(wù)組件里使用
文章來源：http://www.zghlxwxcb.cn/news/detail-810196.html
效果如圖：
相關(guān)鏈接：
React Native 橋接原生實(shí)現(xiàn) JS 調(diào)用原生方法
React Native 橋接原生常量
React Native 橋接原生原子組件文章來源地址http://www.zghlxwxcb.cn/news/detail-810196.html
到了這里，關(guān)于React Native 橋接組件封裝原生組件屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
