背景
- 在App开发中，我们经常会用到分割线，比如FlatList 中我们会用到ItemSeparatorComponent作为行与行之间的分隔线组件。通常制作分割线的思路是，我们可以使用View组件，设置它的高度为1或者0.5，然后给它设置一个背景颜色。或者设置border，border的宽度为1或者0.5等方法。
- 通过这种方式设置的分割线我们经常会发现有一些问题，比如设置View高度为1。我们仔细观察后会发现，在一个列表中，这些分割线有粗有细，显的不均匀。而且分割线较粗，导致列表不美观。
- 我们也可以设置高度为0.5，或者使用“StyleSheet. hairlineWidth”获取最细的线的值，这样分割线比较细，但是，这样会导致列表中分割线有时不展示。
如何解决？
- 方法其实非常的简单，就是当我们设置分割线的时候，需要给分割线组件设置一个margin，margin值为你分割线的宽度值就可以，这其实算是React Native的一个bug，然而FaceBoook却迟迟没有解决。
简单的封装一下_
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
