react native萬能公用組件

項(xiàng)目中總是會用到很多公共的組件,樣式就跟設(shè)置里面的單個(gè)item很像,本項(xiàng)目就是打造一個(gè)公共的萬能組件 項(xiàng)目中有兩個(gè)文件,一個(gè)是公用組件,一個(gè)是字體大小適配

你可以自定義各種組件哦!

具體代碼請參考:https://github.com/LiuC520/react-native-public-component


react native萬能公用組件

使用說明

npm install --save react-native-public-component

項(xiàng)目中引入:

import {PublicCompoennt, dimens} from 'react-native-public-component'

如果要使用字體適配和寬高等信息,可以導(dǎo)入dimens

參數(shù)說明:


props 說明 備注

containerStyle 整個(gè)容器的樣式,可以設(shè)置padding、margin、背景顏色等等

leftComponent 自定義左側(cè)組件

centerContent 自定義中間組件

rightComponent 自定義右側(cè)組件

leftComponentStyle 自定義左側(cè)組件樣式

centerContentStyle 自定義中間組件樣式

rightComponentStyle 自定義右側(cè)組件樣式

leftIcon 左側(cè)圖標(biāo)

leftIconStyle 左側(cè)圖標(biāo)樣式

rightIcon 右側(cè)圖標(biāo)

rightIconStyle 右側(cè)圖標(biāo)樣式

rightArrow 右側(cè)箭頭

rightArrowStyle 右側(cè)箭頭樣式

isRightArrowShow 是否顯示右側(cè)箭頭 默認(rèn)顯示 true

leftText 左側(cè)文字 可以為字符串或者Text組件

leftTextStyle 左側(cè)文字樣式

centerText 中間文字 可以為字符串或者Text組件

centerTextStyle 中間文字樣式

rightText 右側(cè)文字 可以為字符串或者Text組件

rightTextStyle 右側(cè)文字樣式

onPress 整個(gè)item的點(diǎn)擊事件 方法

onLeftPress 左側(cè)點(diǎn)擊事件 方法

onRightPress 右側(cè)點(diǎn)擊事件 方法

onCenterPress 中間點(diǎn)擊事件 方法

hiddenLeft 隱藏左側(cè) bool,默認(rèn)為false

hiddenRight 隱藏右側(cè) bool,默認(rèn)為false

removeLeftView 移除左側(cè) bool,默認(rèn)為false

removeCenterView 移除中間 bool,默認(rèn)為false

removeRightView 移除?右側(cè) bool,默認(rèn)為false

hiddenTopLine 隱藏上劃線 默認(rèn)為?true

topLineStyle 上劃線樣式

topLineLeftMargin 上劃線左邊距 數(shù)字

topLineRightMargin 上劃線右邊距 數(shù)字

hiddenBottomLine 隱藏下劃線 默認(rèn)為false

bottomLineStyle 下劃線樣式

bottomLineLeftMargin 下劃線左邊距 數(shù)字,默認(rèn)左邊距為15

bottomLineRightMargin 下劃線右邊距 數(shù)字

具體的使用方法請參考示例?https://github.com/LiuC520/react-native-public-component/blob/master/example/App.js

上面的樣式或者icon為number表示常量,圖標(biāo)為require導(dǎo)入的,如果uri導(dǎo)入表示對象,具體參考示例

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 對React-Native的學(xué)習(xí),從熟悉基本控件開始。 View 屬性方法 序號名稱屬性O(shè)r方法類型說明 1 ac...
    諾花生閱讀 928評論 0 0
  • 最近在研究React-Native,把該配置的環(huán)境都配置了一遍,HelloWorld跑起來了之后,現(xiàn)在開始學(xué)習(xí)、熟...
    小朱v閱讀 1,073評論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,697評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25 708
  • 午夜鼾聲
    谷濟(jì)子閱讀 455評論 0 0

友情鏈接更多精彩內(nèi)容