React Native mapに独自の情報ウィンドウを表示

そもそもの発端

react-native-mapsを用いてマーカーに独自アイコンを当てると、マーカーをクリックしてもクリックの有効範囲が狭く、デフォルトの情報ウィンドウが表示されにくいという問題が生じました。デフォルトでは、<MapView.Marker />のdescriptionに渡した値が返ります。

対処法

onPress()のイベントが発火した時に、独自の情報ウィンドウを開く関数(ここでは、showExplain)を呼ぶようにする

export default class MapComponent extends Component {
  constructor() {
    super();
    // bind処理
    this.showExplain = this.showExplain.bind(this);

    this.state = { //マーカー情報
      markers: [
        {
          latlng: { latitude: 35.67408075586541, longitude: 139.77613825719834 },
          title: 'Town',
          description: 'Our office is here.',
          image: MarkerIcon,
        },

        {
          latlng: { latitude: 35.68112260338189, longitude: 139.7667827121544 },
          title: 'Tokyo Station',
          description: 'Very very big station.',
          image: MarkerIcon,
        },
      ],
    };
  }
  showExplain(i) {
     // showCallout()は、<MapView.Callout />を呼び出す
    this.state.markers[i].showCallout();
  }
  render() {
    return (
      <MapView style={　height,widthを指定　} >
        {this.state.markers.map((marker, i) => (
          <MapView.Marker
            //keyの指定
            key={`marker-${String(i + 1)}`}
            //refの指定を行う
            ref={(ref) => {
              this.state.markers[i] = ref;
            }}
            description={marker.description}
            onPress={() => this.showExplain(i)}
          >
           // 独自アイコン
            <Image source={marker.image} style={ 大きさ指定 } />

　　　　　　// 独自の情報ウィンドウの内容指定
            <MapView.Callout>
              <View>
                <Text>This is a sample view</Text>
              </View>
            </MapView.Callout>
          </MapView.Marker>
        ))}
      </MapView>
    );
  }
}