Как добавить дополнительное пространство между элементами View без использования отступа CSS в React Native?

Question

Я пытаюсь немного украсить экран в React Native. У меня есть некоторые View, внутри которых есть текстовые элементы. Мне нужно больше пространства между этими представлениями, я попытался установить alignItems: 'space-around' и другие подобные директивы без какого-либо эффекта.

Там есть код, а под ним есть скриншот, на котором я нарисовал красные стрелки, чтобы указать, где Я хотел бы добавить пробел:

export default class UserProfile extends Component {
    render() {
        const {UserInfo} = this.props;
        return (
            <SafeAreaView>
                <View style={styles.container}>
                    <View style={styles.topView}/>
                    <View style={styles.headerView}>
                        <Text style={styles.headerText}>Welcome: {UserInfo.userName}</Text>
                    </View>
                    <View style={styles.itemView}>
                        <Text style={styles.itemTextTitle}>User ID:</Text><Text style={styles.itemText}>{UserInfo.userID}</Text>
                    </View>
                    <View style={styles.itemView}>
                        <Text style={styles.itemTextTitle}>First Name:</Text><Text style={styles.itemText}>{UserInfo.userFName}</Text>
                    </View>
                    <View style={styles.itemView}>
                        <Text style={styles.itemTextTitle}>Last Name:</Text><Text style={styles.itemText}>{UserInfo.userLName}</Text>
                    </View>
                    <View style={styles.itemView}>
                        <Text style={styles.itemTextTitle}>Status:</Text><Text style={styles.itemText}>{UserInfo.userStatus}</Text>
                    </View>
                    <View style={styles.bottomView}/>
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    topView: {
        flex: 3
    },
    bottomView: {
        flex: 3
    },
    headerView: {flex:1 },
    headerText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans},
    itemView: {flex:1 },
    itemTextTitle: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 20, fontWeight: '500'},
    itemText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 18, fontWeight: '200'},
    textStyle: {
        flex:1,
        fontSize: 20,
        fontFamily: globalStyles.fonts.OpenSans,
        fontWeight: '600',
        color: globalStyles.colors.customerGreen,
        textAlign: 'center',
    },
    container: {
        display: 'flex',
        alignContent: 'center',
    },
    buttonStyle: {
        flex: 1,
        padding: 10,
        backgroundColor: '#ffffff',
        borderRadius: 7,
    }
});

Answer 1

Это SafeAreaView, который мешает вашему стилю работать, стиль контейнера должен быть включен, чтобы он работал.

Проверьте это демо, которое я сделал в Snack:

Демо