Реагируйте на проблему собственных карт с наложенными компонентами

Question

Я пытаюсь наложить некоторые элементы в середине и на карте, но безрезультатно.До сих пор я пытался использовать 'OverlayComponent', как описано в документации

render() {
  return (
    <MapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

Этот компонент, кажется, больше не экспортируется react-native-maps как

import MapView, { OverlayComponent } from 'react-native-maps';

урожайность не определена для OverlayComponent.

Есть идеи?Я немного растерялся из-за того, как мне подходить к этому.

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

Спасибо, баг

Answer 1

react-native-maps имеет <Overlay> API компонента .Это кажется подходящим только для изображений.

Почему бы не наложить что-то вроде TouchableOpacity, поместив его абсолютно и обернув все это в <View>:

import { Text, TouchableOpacity, View } from 'react-native';
import MapView from 'react-native-maps';

...

render() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        ...
      />
      <TouchableOpacity style={styles.overlay}>
        <Text style={styles.text}>Touchable Opacity</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  overlay: {
    position: 'absolute',
    bottom: 50,
    backgroundColor: 'rgba(255, 255, 255, 1)',
  },
});