無法正確對齊列表中的中間文本 (Can't get middle text in list aligned correctly)

問題描述

無法正確對齊列表中的中間文本 (Can't get middle text in list aligned correctly)

我正在嘗試製作付款摘要。左邊是日期，中間部分是發生，右邊是總和。從屏幕截圖中可以看出，左右對齊正確，但中間部分，在我的語言中稱為“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
},

非常歡迎任何提示:))

參考解法

方法 1:

This might be because the dates are wider than the other two texts. Can you try giving every ItemText the same fixed width, so that justifyContent: "space‑around" can position them equal?

方法 2:

You can try following styles :

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

and result will be like this :

(by Ingvild Hagen、philman、Manju JK)

參考文件

1. Can't get middle text in list aligned correctly (CC BY‑SA 2.5/3.0/4.0)