垂直对齐内容组件以及滚动

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 。

差异仍然不明确，但您可以按照以下主题进行操作：

1. https://github.com/facebook/react-native/issues/11565
2. flex vs flexGrow vs flexShrink vs flexBasis in React Native?

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