Question

我正在尝试控制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>
        );
    }
}

How this look!

如果仔细观察Border的左端，可能会导致半径行为失真。还有其他方法可以控制边框长度吗？！

更新：

在react-native-elements GitHub上提出了issue的建议，看起来当时没有可用的内置解决方案，目前正在使用FlatList的ItemSeparatorComponent道具。如果有人可以帮助实现此功能，请在GitHub线程上发表评论。

反应本机元素ListItem borderBottom长度控制

0 个答案: