Question

我有一个反应原生的谷歌地图。在该视图的顶部，我在地图上有图标，这些图标放在彼此的顶部，而不是放在地图的任何一侧。我尝试了很多不同的设置，但总是一样。另一件事是按钮在我没有点击它时会做出反应。

我在容器中有容器，然后是mapview。这是代码：

container: {
    flex: 1,
    flexDirection: 'column'
},
map:{
    height: 90+ "%",
    flexDirection: 'column'
},
profileBtn:{
    position: 'absolute',
    top: 25,
    right: 30,
    width: 25,
    height: 15,
    borderRadius: 25/2,
},
homeBtn:{
    position: 'absolute',
    top: 20,
    left: 5,
    width: 200,
    height: 100,
    borderRadius: 25/2,
},

<MapView
    style={styles.map}
    initialRegion={{
        latitude:this.state.latitude,
        longitude:this.state.longitude,
        latitudeDelta: 0.0043,
        longitudeDelta: 0.0034
    }}
    ref={c => this.mapView = c}
    onPress={this.onMapPress}
    loadingEnabled={true}
>
    <View style ={styles.topMap}>
        <TouchableOpacity
            style={styles.profileBtn}
            onPress={()=>{ this.handleClickProfile() }}
        >
            <Image
                source={profile}
                borderRadius={17}
            />
        </TouchableOpacity>
        <TouchableOpacity
            style={styles.homeBtn}
            onPress={()=>{ this.handleClickFavourite() }}
        >
            <Image
                source={require("./home.png")}
                borderRadius={49}
            />
        </TouchableOpacity>
    </View>
    {markers}

Answer 1

我不确定为什么会发生这种情况，但我从here读取了源代码，当您显示return ( <AIRMap ref={ref => { this.map = ref }} {...props} /> )时，会返回此内容：

return (
    <AIRMap
        ref={ref => { this.map = ref }}
        {...props}
    >
        {children}
    </AIRMap>
)

通常，当您编写自定义视图时，您可以这样做：

MapView

也许这就是为什么你的MapView的孩子没有按照你想要的方式进行渲染的原因。但是，要解决此问题，您只需将视图移出View，然后将所有内容包装在return ( <View style={{ flex: 1 }}> <MapView style={styles.map}> {markers} </MapView> <TouchableOpacity ... /> <TouchableOpacity ... /> </View> )中：

TouchableOpacity

但请记住，所有这些position: 'absolute'必须MapView，否则您的// You declared id as "=f_compo" <div id="=f_compo"></div> <script type="text/babel"> var compo= React.createClass({ render: function(){ return (<h3>This is a simple component</h3>); } }); //Find the same ID here. Right now it's "=f_compo" not "f_compo" ReactDOM.render(<compo/> ,document.getElementById('f_compo')); </script>将无法占据整个屏幕

Answer 2

按钮被添加到另一个按钮上，因为您已经使用了position:absolute按钮。如果您打算在地图上使用标记，请按照这种方式进行操作

import { Marker } from 'react-native-maps';

<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

访问this获取更多信息

MapView - 相互叠加的图标

2 个答案: