使用 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
是水平的和橙色背景
最佳答案
从 infos_container
设置中删除 flex: 1
main_container
中的 flex: 0
不应产生任何效果关于 infos_container
infos_container: {
backgroundColor: 'orange',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
关于reactjs - 使用 Flexbox 和 React Native 在容器外部发送文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58781370/