更改 react-native-maps 中活动标记的不透明度答案

【问题标题】：Change opacity of active marker in react-native-maps更改 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>

【问题讨论】：

标签： javascript reactjs react-native react-native-maps

【解决方案1】：

您不能使用 MapView 组件的 onPress 属性并将选定的标记状态值设置回 null。通过这样做，重新渲染将解决您的问题

【讨论】：