Question

MapView在容器视图中

<View style={styles.container}>
  <MapView style={[styles.map]}
    initialRegion={{
      latitude: 18.978189,
      longitude: 73.024911,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
</View>

为了给我的地图提供弧形边框，我将borderRadius提供给容器视图

const styles = {
 container:{
   marginTop:20,
   borderWidth:1,
   borderRadius:20
 },
 map:{
   height:200,
 },
}

这为我的视图提供了边框，我的视图实际上是获得borderRadius，我通过给出borderWidth来交叉检查它：1。但是我的地图没有得到这个容器的边界。地图角落离开容器视图边界。我应该怎么做borderRadius到我的地图。

Answer 1

您可以设置

overflow: 'hidden'

在你的容器中

。它应该隐藏mapView的溢出。

Answer 2

进行了一些修补，找出了以下内容

            <View style={{ 
                height: moderateScale(300) - 60, 
                zIndex: -1, 
                borderRadius: 10, 
                borderWidth: 1, 
                borderColor: userInterface.buttonSelectedFill, 
                overflow: 'hidden',
                alignItems: 'center',
                justifyContent: 'center'}}>

                <MapView 
                    style={{flex: 1, height: '100%', width: '100%', borderRadius: 10, }} 
                    //ref={ map => {currentMap = map }}
                    //region={props.region}
                    rotateEnabled={false}
                    loadingEnabled={true}
                ></MapView>                
            </View>

overflow: 'hidden'直到我也创建了父元素alignItems: 'center'和'justifyContent：'center'`

后才起作用

Answer 3

使用 borderRadius 和隐藏溢出将其包装在父视图中就可以了！

<View style={{ alignSelf: 'center', top: 30, width: '75%', height: 200, borderRadius: 10, overflow: 'hidden' }}>
  <MapView
    style={{ width: '100%', height: 200 }}
    scrollEnabled={true}
    Region={{ latitude: latitude, longitude: longitude }}
    customMapStyle={mapStyle}
  >
    <Marker
      coordinate={{ latitude: latitude, longitude: longitude, latitudeDelta: 0.02, longitudeDelta: 0.02 }}
      pinColor={"white"}
      title={"You are here"}
    />
  </MapView>
</View>

如何给出映射的边界半径以反应原生？

3 个答案: