Question

我正在使用带有react-native-maps的react-native应用程序，并且我希望活动标记（即我单击的那个具有打开的标注气泡）具有与其他标记不同的颜色

我能够通过将ref保存为一种状态并在渲染颜色时进行比较来更改当前标记的颜色（我们从服务器返回的键是不可信的，因此我现在使用ref，直到后端开发人员在响应中提供ID为止），但我遇到了以下问题：

当我在地图上的其他位置单击以取消标注时，我无法将标记颜色设置回前一个颜色（我希望它们最初都处于完全不透明状态，然后将“非活动”颜色设置为不透明度为50％，直到取消标注为止。

我遍历了react-native-maps中的所有文档和示例，但是找不到将状态更改事件与dismiss事件挂钩的任何方法。

这是标记的当前代码：

      <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。通过重新渲染可以解决您的问题

更改反应本机图中主动标记的不透明度

1 个答案: