更改 react-native-maps 中活动标记的不透明度
Posted
技术标签:
【中文标题】更改 react-native-maps 中活动标记的不透明度【英文标题】:Change opacity of active marker in react-native-maps 【发布时间】:2019-09-09 13:53:58 【问题描述】:我正在使用 react-native-maps 开发一个 react-native 应用程序,我希望活动标记(即我单击并打开标注气泡的那个)具有与其他标记不同的颜色.
我能够通过将 ref 保存到一个状态并在渲染颜色时进行比较来更改当前标记的颜色(我们从服务器返回的密钥不可信,所以我现在使用 ref,直到后端开发人员在响应中提出一个 ID),但我偶然发现了以下问题:
当我单击地图上的其他位置以关闭标注时,我无法将标记颜色设置回之前的颜色(我希望它们最初都处于完全不透明状态,然后将“非活动”设置为50% 的不透明度,直到取消标注)。
我翻遍了 react-native-maps 中的文档和示例,但找不到任何将状态更改事件挂钩到关闭事件的方法。
这是我当前的标记代码:
<Marker
key=index
coordinate=loc.coordinate
ref=ref => loc.ref = ref
opacity=activeMarkerRef === null || activeMarkerRef === loc.ref ? 1 : 0.5
onPress=() => setActiveMarkerRef(loc.ref);
>
<Callout
tooltip
style=styles.bubbleView
>
<MapInfoBubble>
<Text style=styles.bubbleTitle>loc.name</Text>
<Text>
<Text style=styles.descrTitle>Address: </Text>
<Text>loc.address</Text>
</Text>
<Text>
<Text style=styles.descrTitle>Postal Code: </Text>
<Text>loc.postal_code</Text>
</Text>
</MapInfoBubble>
</Callout>
</Marker>
))
</MapView>
【问题讨论】:
【参考方案1】:您不能使用 MapView 组件的 onPress 属性并将选定的标记状态值设置回 null。通过这样做,重新渲染将解决您的问题
【讨论】:
以上是关于更改 react-native-maps 中活动标记的不透明度的主要内容,如果未能解决你的问题,请参考以下文章
使用 react-native-maps 未显示谷歌地图/空白
使用未声明的标识符“AIRGoogleMapOverlay”react-native-maps
console.error: "react-native-maps" AirGoogleMaps 目录必须添加到您的 xCode 项目中