在容器内右对齐项目

Question

这可能是一个简单的答案，但我仍在学习 js / react native 并且有点不知所措。

有人可以解释为什么以下代码无法右对齐“障碍”元素吗？

import React from 'react';
import {View, StyleSheet } from 'react-native'
import AppText from './AppText';

function ListItem({ name, uid, handicap }) {
    return (
        <View style={styles.container}>
            <AppText>{uid}. </AppText>
            <AppText>{name}</AppText>
            <AppText style={{justifyContent: "flex-end"}}>{handicap}</AppText>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        padding: 10
    },
})

export default ListItem;

我想要类似的东西：

1. 姓名 5
2. 名字 6

但是得到

1. 姓名5
2. 姓名6

谢谢

Answer 1

尝试将 flex: 1 添加到容器样式中

...
container: {
        flex: 1,
        flexDirection: "row",
        padding: 10
    },
 ...