如何始终在 React Native 地图中显示我的标注

Question

我尝试始终显示

<Callout />

或

<Marker />

，而不需要单击标记。

这是我的标记标注代码：

<Marker key={markerList.id} coordinate={destination}>
  <Callout style={{height: 70, width: 200}} tooltip>
    <View
      style={{
        flex: 1,
        backgroundColor: '#FAAA18',
        borderRadius: 40,
        flexDirection: 'row',
      }}
    >
      <Text>
        <Image resizeMode="contain" source={image} style={styles.icon} />
      </Text>

      <View
        style={{
          flexDirection: 'column',
          paddingTop: 15,
        }}
      >
        <Text style={{color: '#fff', fontWeight: '700'}}>Drop Off</Text>
        <Text style={{color: '#fff'}}>3km Away</Text>
      </View>
    </View>
  </Callout>
</Marker>

这是我想要的输出：

Answer 1

您可以将引用传递给 Marker。然后使用 showCallout() 函数。

const markerRef = useRef();

useEffect(() => {
  if(markerRef.current){
    markerRef.current..showCallout();
  }
}, [markerRef.current]);

<Marker ref={markerRef} key={markerList.id} coordinate={destination}>
  <Callout style={{height: 70, width: 200}} tooltip>
    <View
      style={{
        flex: 1,
        backgroundColor: '#FAAA18',
        borderRadius: 40,
        flexDirection: 'row',
      }}
    >
      <Text>
        <Image resizeMode="contain" source={image} style={styles.icon} />
      </Text>

      <View
        style={{
          flexDirection: 'column',
          paddingTop: 15,
        }}
      >
        <Text style={{color: '#fff', fontWeight: '700'}}>Drop Off</Text>
        <Text style={{color: '#fff'}}>3km Away</Text>
      </View>
    </View>
  </Callout>
</Marker>