获得与 ...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 /> 组件（它需要绝对 "overflow" 其他元素），但不适用于您的容器。使用 flex: 1 使容器全高，容器中的另一个元素应该可以工作。

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

获得与 ...StyleSheet.absoluteFillObject 相同的效果而不占用更多高度

Get same effect as ...StyleSheet.absoluteFillObject without taking up more height

javascript

reactjs

react-native

react-native-android