如何在不影响样式的情况下在视图中呈现视图

Question

所以我正在渲染一个将显示许多组件的View。当我不使用nestedContainer时，一切看起来都像它应该的那样。每个组件都按应有的方式间隔开来，并且正确对齐。现在，如果我添加具有nestedContainer样式的View，则它不再space-around应用于HandRolledIcon和UserName组件。如何解决此问题并确保嵌套视图中的这些组件使用我想要的样式？

(这个问题与我的另一个问题有关，其中包含更多详细信息)

<View style={styles.container}>
<View style={styles.nestedContainer>
<HandRolledIcon style={styles.hrIcon} />
<UserName style={styles.userName} />
</View>
</View>
container: {
flex: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
nestedContainer: {
alignItems: 'center',
justifyContent: 'space-around',
},
hrIcon: {
alignItems: 'center',
},
userName: {
alignItems: 'center',
}

Answer 1

我实际上不知道你想达到什么目的，但我觉得你必须复习你的弹性盒知识。

查看这些链接，它可能会对您有所帮助

• https://tympanus.net/codrops/css_reference/flexbox/
• https://facebook.github.io/yoga/docs/getting-started/

实现结果的一种方法是将 flexGrow：1(flex：1 在 react-native 中的工作方式相同)提供给嵌套容器，这将使您的嵌套容器视图占用所有额外的空间。

nestedContainer: {
flexGrow: 1,
alignItems: 'center', // <--- This can be removed based on your requirements since its already given to the parent view
justifyContent: 'space-around',
},

注意：这只是一种方式，其他方法可能只需彻底浏览弹性框文档即可。