reactjs - 使用 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',
    },
})

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

Answer 1

从 infos_container 设置中删除 flex: 1 main_container 中的 flex: 0 不应产生任何效果关于 infos_container

的样式

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