带有Flexbox和React Native的容器外文本

Question

使用react native和flexbox，我不明白为什么文本在容器之外（橙色bakcground）？

<View style={styles.main_container}>
    <View style={styles.infos_container}>
        <View style={styles.info_item}>
            <Text style={styles.info_name}>
                Âge
            </Text>
            <Text style={styles.info_value}>
                18
            </Text>
        </View>
        <View style={styles.info_item}>
            <Text style={styles.info_name}>
                Médias publics
            </Text>
            <Text style={styles.info_value}>
                2
            </Text>
        </View>
    </View>
</View>

const styles = StyleSheet.create({
    infos_container: {
        backgroundColor: 'orange',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5,
    },
    info_item: {
        margin: 5,
        alignItems: 'center',
    },
    info_name: {
        color: '#6c757d',
        fontSize: 11,
    },
    info_value: {
        color: '#343a40',
    },
})

我只希望块styles.info_item是水平的橙色背景

Answer 1

flex: 1从infos_container设置flex: 0中删除main_container不应影响样式infos_container

infos_container: {
   backgroundColor: 'orange',
   flexDirection: 'row',
   flexWrap: 'wrap',
   padding: 5,
},