我正在尝试控制ListItem上BottomBorder的长度,该listItem呈现在一个List Component内,通过该文档,我可以找到的唯一方法是通过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>
);
}
}
如果仔细观察Border的左端,可能会导致半径行为失真。还有其他方法可以控制边框长度吗?!
更新:
在react-native-elements GitHub上提出了issue的建议,看起来当时没有可用的内置解决方案,目前正在使用FlatList的ItemSeparatorComponent道具。如果有人可以帮助实现此功能,请在GitHub线程上发表评论。