更改 react-native-maps 中活动标记的不透明度
Change opacity of active marker in react-native-maps
我正在使用 react-native-maps 开发一个 react-native 应用程序,我希望活动标记(即我点击并打开标注气泡的标记)具有与其他标记。
我能够通过将 ref 保存到一个状态并在渲染颜色时比较它来更改当前标记的颜色(我们从服务器返回的密钥不可信,所以我将 ref 用于现在,直到后端开发人员在响应中提供一个 ID),但我遇到了以下问题:
当我点击地图上的其他地方关闭标注时,我无法将标记颜色设置回之前的颜色(我希望它们一开始都处于完全不透明状态,然后设置 "inactive" 一个到 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>
不能使用 MapView 组件的 onPress 属性并将选定的标记状态值设置回 null.By 这样做重新渲染会解决您的问题
我正在使用 react-native-maps 开发一个 react-native 应用程序,我希望活动标记(即我点击并打开标注气泡的标记)具有与其他标记。
我能够通过将 ref 保存到一个状态并在渲染颜色时比较它来更改当前标记的颜色(我们从服务器返回的密钥不可信,所以我将 ref 用于现在,直到后端开发人员在响应中提供一个 ID),但我遇到了以下问题:
当我点击地图上的其他地方关闭标注时,我无法将标记颜色设置回之前的颜色(我希望它们一开始都处于完全不透明状态,然后设置 "inactive" 一个到 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>
不能使用 MapView 组件的 onPress 属性并将选定的标记状态值设置回 null.By 这样做重新渲染会解决您的问题