React Native Elements ListItem borderBottom 长度控制

Question

我试图控制 ListItem 上 BottomBorder 的长度，listItem 在列表组件内呈现，浏览文档我能找到的唯一方法是通过 borderBottomStartRadius ，它正在工作并实现所需的整体外观。但从 UI 的角度来看，它看起来并不完美。

这是我的代码片段：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text
} from 'react-native';
import {
    List,
    ListItem,
    Avatar,
    Header
} from 'react-native-elements';


class HomePage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Header
                    leftComponent={<Image source={require('../../../images/avtar_logo.png')} />}
                    centerComponent={{ text: 'DAWI', style: { color: '#fff', fontSize: 20, fontWeight: '500', fontFamily: 'Roboto' } }}
                    rightComponent={{ icon: 'notifications', color: '#fff' }}
                    outerContainerStyles={{ backgroundColor: '#40beb3' }}
                    innerContainerStyles={{ justifyContent: 'space-between' }}
                />
                <List containerStyle={{ marginTop: 0 }}>
                    {
                        Data.map((section, index) => (
                            <ListItem
                                title={
                                    <View style={styles.titleView}>
                                        <Text style={styles.titleText}>{section.title}</Text>
                                    </View>}
                                subtitle={
                                    <View style={styles.subtitleView}>
                                        <Text style={styles.subtitleText}>{section.subtitle}</Text>
                                    </View>
                                }
                                key={index}
                                avatar={<Avatar
                                    height={24}
                                    width={24}
                                    source={section.image}
                                    overlayContainerStyle={{ backgroundColor: colors.whiteBackground }}
                                />}
                            />
                        ))
                    }
                </List>
            </View>
        );
    }
}

这看起来怎么样！

如果仔细观察边界的左端，它看起来会因半径行为而扭曲。还有其他方法可以控制边框长度吗？

更新：

在react-native-elements GitHub上提出了一个问题，看起来当时没有可用的内置解决方案，有一个解决方案使用来自FlatList的ItemSeparatorComponent prop。如果有人可以帮助实现此功能，请在 GitHub 线程上发表评论。