FlatList Android项目重叠

Question

我的ReactNative应用程序中有一个FlatList，但是我注意到（当交替使用背景色时）这些项目在一个很小的空间中相互重叠。

其重叠程度的示例：https://imgur.com/a/wLQnGOG

我的样式，基本上是在更改颜色（在行中）。

const styles = StyleSheet.create({
    tableRow: {
        padding: 5,
        flexDirection: "row",
        justifyContent: "space-between",
    },

    tableBuy: {
        backgroundColor: colors.buyBackground
    },

    tableSell: {
        backgroundColor: colors.sellBackground
    },
})

export default styles;

我的组件TSX

export default class CoinPageHistoryComponent extends React.Component<CoinPageHistoryProps> {
    constructor(props: CoinPageHistoryProps) {
        super(props);

        this.state = {};
    }

    renderHistoryBlock = ({ item }) =>
        <View style={[styles.tableRow, item.type === "SELL" ? styles.tableSell : styles.tableBuy]} >
            <Text style={styles.tableRowItem1} >{item.type === "SELL" ? "+" : "-"} {item.quantity.toFixed(8)}</Text>
            <Text style={styles.tableRowItem2} >{item.rate.toFixed(8)}</Text>
            <Text style={styles.tableRowItem3} >{item.total.toFixed(8)}</Text>
        </View>

    public render() {
        return (
            <View style={styles.container}>
                <View style={styles.tableRow}>
                    <Text style={styles.tableRowItemHeader} >Quantity</Text>
                    <Text style={styles.tableRowItemHeader} >Rate</Text>
                    <Text style={styles.tableRowItemHeader} >Total</Text>
                </View>

                <FlatList
                    style={styles.table}
                    data={this.props.coin.history}
                    keyExtractor={(_, index) => index.toString()}
                    onRefresh={() => this.props.onRefresh()}
                    refreshing={this.props.refreshing}
                    renderItem={this.renderHistoryBlock}
                />
            </View>
        );
    }
}