如何添加链接(url)来响应本机地图标注

Question

我试过这个：

<MapView.Marker id={marker.id}
                coordinate={marker.coordinates}
                title={marker.title}>
                <MapView.Callout style={styles.callout}  >
         <Text style={styles.link} onPress={this.openUrl.bind(this)}>
                   {this.props.marker.link} 
         </Text>
    </MapView.Callout>
 </MapView.Marker>

但是 openUrl 函数不会调用。

Answer 1

文本不包含 on按 callBack，继续按从文本到 MapView.Callout。

<MapView.Callout
         onPress={this.openUrl.bind(this)}
         style={styles.callout}
       >
            <Text style={styles.link}>
              {this.props.marker.link}
            </Text>
</MapView.Callout>

更新：对于拥有多个链接，您可以使用自定义标注。从标注中移除 onPress，并将可点击的子项添加到标注中：

      <MapView.Callout
        style={styles.callout}
      >
        <TouchableOpacity
          onPress={()=>{this.openUrl(this.props.marker.link1)}}
        >
          <Text style={styles.link}>
            {this.props.marker.link1}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={()=>{this.openUrl(this.props.marker.link2)}}
        >
          <Text style={styles.link}>
            {this.props.marker.link2}
          </Text>
        </TouchableOpacity>
      </MapView.Callout>