項(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

使用說(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ì)象,具體參考示例