背景
- 在App開發(fā)中稿辙,我們經(jīng)常會(huì)用到分割線贩虾,比如FlatList 中我們會(huì)用到ItemSeparatorComponent作為行與行之間的分隔線組件平道。通常制作分割線的思路是募强,我們可以使用View組件寞宫,設(shè)置它的高度為1或者0.5萧福,然后給它設(shè)置一個(gè)背景顏色”哺常或者設(shè)置border鲫忍,border的寬度為1或者0.5等方法。
- 通過(guò)這種方式設(shè)置的分割線我們經(jīng)常會(huì)發(fā)現(xiàn)有一些問題钥屈,比如設(shè)置View高度為1悟民。我們仔細(xì)觀察后會(huì)發(fā)現(xiàn),在一個(gè)列表中篷就,這些分割線有粗有細(xì)射亏,顯的不均勻。而且分割線較粗腻脏,導(dǎo)致列表不美觀鸦泳。
- 我們也可以設(shè)置高度為0.5,或者使用“StyleSheet. hairlineWidth”獲取最細(xì)的線的值永品,這樣分割線比較細(xì)做鹰,但是,這樣會(huì)導(dǎo)致列表中分割線有時(shí)不展示鼎姐。
如何解決钾麸?
- 方法其實(shí)非常的簡(jiǎn)單,就是當(dāng)我們?cè)O(shè)置分割線的時(shí)候炕桨,需要給分割線組件設(shè)置一個(gè)margin饭尝,margin值為你分割線的寬度值就可以,這其實(shí)算是React Native的一個(gè)bug献宫,然而FaceBoook卻遲遲沒有解決钥平。
簡(jiǎn)單的封裝一下_
import React, { PureComponent } from 'react'
import {
View,
StyleSheet
} from 'react-native'
class SpliteLine extends PureComponent {
render () {
let { lineHeight, color, style, contentStyle } = this.props
return (
<View style={{ backgroundColor: 'white', ...contentStyle }}>
<View style={[{ height: 0, borderTopWidth: lineHeight, borderColor: color, opacity: 0.7, margin: StyleSheet.hairlineWidth }, style]} />
</View>
)
}
}
SpliteLine.defaultProps = {
lineHeight: StyleSheet.hairlineWidth,
color: '#bdbdbd',
contentStyle: {}
}
export default SpliteLine