react native萬(wàn)能公用組件

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

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

具體代碼請(qǐng)參考:https://github.com/LiuC520/react-native-public-component


react native萬(wàn)能公用組件

使用說(shuō)明

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

項(xiàng)目中引入:

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

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

參數(shù)說(shuō)明:


props 說(shuō)明 備注

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ù)字

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

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

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

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

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

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