🍣

【ReactNative】react-native-maps応用編①「ボタンをオーバレイ表示」

2020/12/15に公開

JavaScript

はじめに

前回、以下のような記事でreact-native-mapsのインストールと、最も基本的な使い方である地図の表示方法について紹介しました。

以降色々と応用方法について紹介していこうと思いますが、今回はUIに関する応用について紹介します。

今回のゴール

今回のゴールは以下のようなUIを作ることです。

button

検索ボタンが地図の右上に表示されています。
このように地図の特定の位置に固定でボタンを表示させたいと思います。

なお、今回はアイコンやボタンのUIとしてnative-baseを使っています。

https://nativebase.io

native-base以外にもreact-native-elementsやreact-native-paperなどUIに関する有名どころライブラリにはいくつか流派があるので、ご自身の環境に合ったものに置き換えていただいても構いません。

前提としてnative-baseのバージョンは以下の通りとします。

native-base@2.13.8

コード

実装したコードは以下の2種類です。
まずはボタンとなるButtonView

ButtonView.tsx

import React from 'react';
import { StyleSheet } from 'react-native';
import { Text, View, Button, Icon } from 'native-base';

interface Props {
  onPressIcon : () => void;
}

// 地図の右上に表示する用のコンポーネント(FC)
const ButtonView : React.FC<Props> = (props) => {
  const { onPressIcon } = props;
  return (
    <View style={{position : 'absolute', right : '0%'}}>
      <Button style={{margin : 5}} onPress={onPressIcon} >
        <Icon type='FontAwesome5' name='search' />
      </Button>
    </View>
  );
}

export default ButtonView;

ポイントはpositionをabsolute、rightを0%とすることで右上に固定位置で表示していることです。

続いて地図の表示を行うMapComponent.tsx

MapComponent.tsx

import React from 'react';
import { StyleSheet, Alert } from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import { Container } from 'native-base';
import ButtonView from './ButtonView';

const MapComponent: React.FC = () => {
  return (
    <Container>
      <MapView 
	provider={PROVIDER_GOOGLE} 
	style={{...StyleSheet.absoluteFillObject}} 
	initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
      <ButtonView onPressIcon={()=>{ Alert.alert("Button Pressed") }} />
    </Container>
  );
}

export default MapComponent;

ポイントはMapViewとButtonViewを記載する位置です。
MapViewを表示した上にボタンを表示させたいので、ButtonViewは後に描画させるようにしています。

まとめ

今回はreact-native-mapsの応用編第一段として「地図に被せて表示するボタン」の実装方法を紹介しました。
地図系のアプリでは、地図上に何かしらの情報をプロットすることが殆どで、さらにフィルター機能が備わっている場合が多いです。
そうした際の、検索画面への導線として今回のように地図上にボタンを置くことが多いので、参考になれば幸いです。

はじめに

今回のゴール

コード

まとめ

Discussion