代码之家 › 专栏 › 技术社区 › Return-1

对覆盖组件的本机映射问题作出反应

react-native-maps

0

Return-1 · 技术社区 · 6 年前

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 但其中一个元素我试图覆盖需要捕捉输入,特别是一个文本输入我试图变成一个搜索栏。

谢谢你真是个笨蛋

1 回复 | 直到 6 年前

1

10

hennzen 6 年前

react-native-maps 有一个 <Overlay> Component 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)',
  },
});

2

Return-1 4 年前

我们吃了地图盒药丸,整个团队的生活在很多方面都变好了:)