Question

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

(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

我实际上并不知道你想要实现的目标，但我觉得你必须提高你的弹性盒知识。

查看这些可能对您有帮助的链接

实现结果的一种方法是给嵌套容器提供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',
  },

注意：这只是一种方式，可以通过其他方式彻底浏览弹性框文档。

如何在视图中呈现视图而不影响样式

1 个答案: