javascript - 更改 react native map 中事件标记的不透明度

Question

我正在使用react-native-maps开发一个react-native应用程序，我希望事件标记(即我点击并打开标注气泡的标记)具有与其他标记不同的颜色.

我能够通过将引用保存到状态并在渲染颜色时进行比较来更改当前标记的颜色(从服务器返回的 key 不可信，所以我现在使用引用，直到后端开发人员在响应中提供 ID)，但我遇到了以下问题:

当我单击 map 上的其他位置以消除标注时，我无法将标记颜色设置回前一个颜色(我希望它们最初全部处于完全不透明状态，然后将“非事件”颜色设置为50% 不透明度，直到标注消失)。

我已经浏览了react-native-maps中的所有文档和示例，但找不到任何将状态更改事件 Hook 到解雇事件的方法。

这是我当前的标记代码:

      <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>

Answer 1

您不能使用 MapView 组件的 onPress 属性并将所选标记状态值设置回 null。通过执行此操作，重新渲染将解决您的问题