【ReactNative】react-native-maps応用編③「オリジナルマーカーを作る」
はじめに
react-native-maps
の応用編第三弾になります。
バックナンバーは以下の通りです。
今回ですが、react-native-maps
でマーカーをカスタムして使用する例です。
公式のドキュメントに従えば簡単にマーカーを設置することができますが、よくあるマップのピンっぽくて見た目的にもう少しアレンジを加えたいところです。
そこで今回はコピペで使用できるマーカーをご紹介します。
使用ライブラリ
今回はreact-native-maps
に加えてnative-base
を使用します。
というのも、マーカー中にアイコンを表示させるためです。
従ってreact-native-elements
やreact-native-paper
のように他のアイコンを使用するライブラリを使っても構いません。
また、実際にアイコンを表示させるのはreact-native-vector-icons
なので、そちらを直接組み込んで使用しても問題ありません。
インストール
yarn add native-base react-native-vector-icons
react-native link react-native-vector-icons
サンプル
以下がカスタムマーカーのサンプルになります。
import React from 'react';
import {Marker} from 'react-native-maps';
import {Icon, View} from 'native-base';
const CustomMarker: React.FC = () => {
return (
<Marker
coordinate={{
latitude: 34.971698,
longitude: 138.3890637,
}}>
<View style={{justifyContent: 'center'}}>
<View
style={{
top: 2,
width: 38,
height: 38,
alignSelf: 'center',
justifyContent: 'center',
borderRadius: 38 / 2,
backgroundColor: '#36C1A7',
}}>
<Icon
type="FontAwesome5"
name="utensils"
style={{
color: '#FFF',
textAlign: 'center',
fontSize: 20,
}}
/>
</View>
<View
style={{
top: -2,
width: 0,
height: 0,
alignSelf: 'center',
backgroundColor: 'transparent',
borderLeftWidth: 10,
borderRightWidth: 10,
borderTopWidth: 20,
borderBottomWidth: 0,
borderTopColor: '#36C1A7',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
}}
/>
</View>
</Marker>
);
};
export default CustomMarker;
出力
何をしているか
ポイントとしては2種類のView
を使い分けていることが挙げられます。
Icon
をラップしている方のView
はスタイルを調整して丸くしており、マーカーのヘッドの部分に該当します。
後の方のView
は、こちらもスタイルを調整して逆三角形の形にして、マーカーのピンの部分を表現しています。
これはよう要素のwidth
とheight
を0
にすることでborder
のみを表示し、上下左右のborder
の幅と色を調整することで三角形を表現するテクニックを使っています。
下記の記事に分かりやすい解説が載っていました。
まとめ
今回はreact-native-maps
でよく使うマーカーのカスタム例を紹介しました。
もちろんマーカーの中にアイコンでなく、自作の画像を埋め込んだりすることでよりオリジナリティのあるマーカーができると思います。
また、今回は何のprops
も持たないFC
としてありますが、実際はプロットする座標をはじめ、実際のアプリの形態に合わせたprops
を渡す必要があります。
Discussion