垂直对齐具有滚动能力的内容组件

Question

我正在尝试垂直对齐来自 NativeBase 的 Content 组件，如果内部内容对于屏幕尺寸而言太大，则可以滚动。

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

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

组件：

<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'
  }

Answer 1

在 react-native flex 中的工作方式与在 CSS 中不同。参见docs。使用 flexGrow 代替如下样式：

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

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

我还不清楚其中的区别，但您可以关注以下主题：

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

Vertically aligning Content component with ability to scroll