React Native Maps, компоненты под картой отображаются над картой, а не под ней

Я пытаюсь реагировать на собственные карты и хочу отображать текстовое поле и другие компоненты под картой, но все компоненты отображаются над картой.

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
  }
});

person Akash Salunkhe    schedule 15.11.2018    source источник


Ответы (1)


StyleSheet.absoluteFillObject в основном такой же, как:

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

Когда компонент имеет абсолютное позиционирование, он отсоединяется от обычного потока компоновки (как в css), поэтому старайтесь не использовать его для карты. Вместо этого используйте flex:1, или width: 100% и т. д.

person Nikolay Tomitov    schedule 15.11.2018