javascript - 如何在 View 中渲染 View 而不影响样式

Question

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

(This question is related to my other question which contains more details)

<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中的作用相同)给你的嵌套容器，这将使你的嵌套容器 View 占据所有额外的空间。

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

注意:这只是一种方法，其他方法也可能，只需彻底浏览 Flex-box 文档即可。