React Native FlatList样式

Question

我正在尝试渲染一个Flat List，而我正在使用Pure Component。目前我有相当多的视图包含在一起，以获得所需的背景颜色不占据整个行高的效果，因此这些行看起来彼此之间有空间。然而，正如图片所示，我遇到了一个问题，颜色在整行中显得流畅。我不确定为什么会这样。 （0之前的黄线）。

这是我的行组件代码。有一个初始的空白视图，可以为行添加一些起始空间。

<TouchableHighlight onPress={this.props.onPress}>
    <View style={styles.items}>
        <View style={styles.holder}>
            <Text style={styles.text}></Text>
        </View>
        <View style={styles.title}>
            <Text style={styles.text}>{this.props.title}</Text>
        </View>
        <View style={styles.open}>
            <Text style={styles.text}>0</Text>
        </View>
    </View>
</TouchableHighlight>

这也是我正在使用的造型。

const styles = StyleSheet.create({

items: {
    flex: 1,
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',

},
holder: {
    flex: 1,
    height: 40,
    backgroundColor: '#C8102E',
},
title: {
    flex: 8,
    height: 40,
    justifyContent: 'center',
    backgroundColor: '#C8102E',
},
open: {
    flex: 2,
    height: 40,
    justifyContent: 'center',
    backgroundColor: '#C8102E',
},
text: {
    fontSize: 20,
    fontWeight: 'bold',
},

});