在不占用更多高度的情况下获得与... StyleSheet.absoluteFillObject相同的效果

Question

我必须location从此样式表添加：

const mapStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  location: {
    ...StyleSheet.absoluteFillObject,
    width: 400,
    alignItems: 'center',
  }
})

到我的自动填充（<Location />），以便在Android上自动填充列表将溢出其他组件。

例如：

    <Container style={mapStyles.location}>
    <Location />
    </Container>

但是，似乎将下方的元素<Location />向下推至其下方的设备屏幕高度左右（因此，在下方有一个完整的空白屏幕<Location />，然后出现其他组件。我如何获得与...StyleSheet.absoluteFillObject将组件进一步向下移动时获得的效果相同的效果屏幕？

Answer 1

StyleSheet.absoluteFillObject将被以下属性替换（source）：

const absoluteFillObject = {
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
};

它适用于您的<Location />组件（绝对需要“溢出”其他元素），但不适用于您的容器。使用容器中flex: 1的另一个元素使容器满高，它应该可以工作。

const mapStyles = StyleSheet.create({
  container: {
    flex: 1,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  location: {
    ...StyleSheet.absoluteFillObject,
    width: 400,
    alignItems: 'center',
  }
})