无法正确对齐列表中的中间文本答案

【问题标题】：Can't get middle text in list aligned correctly无法正确对齐列表中的中间文本
【发布时间】：2020-07-28 16:15:48
【问题描述】：

我正在尝试制作付款摘要。左边是日期，中间部分是发生，右边是总和。从截图中可以看出，左右对齐是正确的，但是中间部分，在我的语言中叫做“hendelse”，没有正确对齐：

代码如下；

const Betalinger = [
{
    date:'16.04.2020',
    occurrence:'Utbetaling',
    sum: 11020,
},
{
    date:'15.03.2020',
    occurrence:'Utbetaling',
    sum: 8265,
},
{
    date:'14.02.2020',
    occurrence:'Utbetaling',
    sum: 8265,
},
{
    date:'14.01.2020',
    occurrence:'Utbetaling',
    sum: 8265,
},
{
    date:'14.12.2019',
    occurrence:'Utbetaling',
    sum: 8200,
},



];

导出默认函数 Utbetaling() {

return(
    <SafeAreaView style={styles.container}>

        <View style = {styles.titleHeader}>
            <Text style={styles.titleText}>Dato</Text>
            <Text style={styles.titleText}>Hendelse</Text>
            <Text style={styles.titleText}>Beløp</Text>
        </View>

        <ScrollView>
            {Betalinger.map((item, index) => (
                <View  key = {index} style={styles.listItems}>
                    <Text style={styles.ItemText}>{item.date}</Text>
                    <Text style={styles.ItemText}>{item.occurrence + "     "}</Text>
                    <Text style={styles.ItemText}>{item.sum + " kr"}</Text>
                </View>

            ))}
        </ScrollView>

            <View>
            <TouchableOpacity style={styles.LinkContainer} onPress={() => Linking.openURL("https://lanekassen.no/nb-NO/verktoy-og-frister/Frister-i-Lanekassen/utbetaling-av-utdanningsstotte/") }>
                <FontAwesome key ={0} name ={'arrow-circle-right'} size={30} color={'#4d264f'} />
            </TouchableOpacity>
            </View>


    </SafeAreaView>
);

还有 CCS：

const styles = StyleSheet.create({

container: {
    flex: 1,
    width: '100%',
    height: '100%',
},
titleHeader: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    backgroundColor: '#4d264f',
    height: "15%",
    width: "100%",
    bottom: 10,
},
titleText: {
    color: "white",
    fontSize: 16,
},
listItems: {
    flexDirection: "row",
    borderBottomWidth: 1,
    justifyContent: "space-around",
    marginBottom: 10,
},
ItemText: {
    fontSize: 15,
    marginBottom: 10,
},
LinkContainer: {
    right: 0,
    bottom: 0
},

非常欢迎任何提示:))

【问题讨论】：

标签： css list react-native alignment

【解决方案1】：

这可能是因为日期比其他两个文本宽。您可以尝试给每个ItemText 相同的固定宽度，以便justifyContent: "space-around" 可以将它们定位相等吗？

【讨论】：

【解决方案2】：

您可以尝试以下样式：

listItems: {
    flexDirection: "row",
    borderBottomWidth: 1,
    justifyContent: "space-around",
    marginBottom: 10,
    flex: 1,
},
ItemText: {
    fontSize: 15,
    marginBottom: 10,
    flex: 1/3,
    textAlign: 'center'
},

结果将是这样的：

【讨论】：