javascript - 在不占用更多高度的情况下获得与 ...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',
  }
})