React Native 画一条漂亮的分割线

背景

• 在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