ネイティブマップのコールアウトに反応するリンク（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

テキストは、たonPressコールバックを含んMapView.CalloutにテキストからたonPressを移動しません。

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