React Native Maps ，地图下方的组件显示在地图上方而不是下方答案

【问题标题】：React Native Maps , components below map are displayed above map and not below itReact Native Maps ，地图下方的组件显示在地图上方而不是下方
【发布时间】：2018-11-15 14:13:17
【问题描述】：

我正在尝试响应原生地图，我想在地图下方显示文本字段和其他组件，但所有组件都显示在地图上方

ContactComponent - （我在哪里使用地图组件，在它下面想显示其他组件）

  render() {
    return (
      <View style={styles.container}>
        <MapComponent />
        <Text>Akas</Text>
      </View>
    );
  }

地图组件 -

    render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE} // remove if not using Google Maps
          style={styles.map}
          initialRegion={{
            latitude: 19.15384,
            longitude: 72.92902,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }}
        >
          <Marker
            coordinate={{
              latitude: 19.15384,
              longitude: 72.92902
            }}
            title={"Hello"}
            description={"desc"}
          />
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 200,
    width: 400,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  map: {
    ...StyleSheet.absoluteFillObject
  }
});

【问题讨论】：

标签： reactjs react-native react-native-maps

【解决方案1】：

StyleSheet.absoluteFillObject 基本等同于：

position:absolute,
top: 0,
left: 0,
...

当组件是绝对定位时，它会脱离正常的布局流程（就像在 css 中一样），所以尽量不要将它用于地图。而是使用flex:1, 或width: 100% 等。

【讨论】：