垂直对齐具有滚动功能的内容组件答案

【问题标题】：Vertically aligning Content component with ability to scroll垂直对齐具有滚动功能的内容组件
【发布时间】：2017-11-17 22:21:26
【问题描述】：

我正在尝试垂直对齐 NativeBase 中的内容组件，如果里面的内容对于屏幕尺寸来说太大，则可以滚动。

这意味着在大型设备中内容垂直居中对齐，而在小型设备中是可滚动的，因为它的高度高于设备高度。

可以通过不同的方式实现两者，但不能同时实现。

组件：

<Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
        {bunchOfContent}
    </Content>
</Container>

垂直对齐但不可滚动的样式：

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    flex: 1,
    justifyContent: 'center'
  }

对于可滚动但不垂直对齐：

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    justifyContent: 'center'
  }

【问题讨论】：

【解决方案1】：

在 react-native flex 中的工作方式与在 CSS 中不同。请参阅docs。改为使用 flexGrow，如下所示：

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
content: {
    flexGrow: 1,
    justifyContent: 'center'
}

在您的第一个内容样式中使用 flexGrow: 1 而不是 flex: 1。

我仍然不清楚这些差异，但您可以关注以下主题：

在正确理解差异后，我将更新此答案。

【讨论】：