[ReactNative] react-native-maps 응용편 ① "디스플레이 단추 중첩"

개시하다

지난번에는 아래의 글에서 설치react-native-maps와 가장 기본적인 사용 방법인 지도의 표시 방법을 소개했다.
https://zenn.dev/nekoniki/articles/0c40e9267b81e4
앞으로 다양한 응용방법을 소개하고 싶은데 이번에UI 관련 응용을 소개해 드리겠습니다.

이번 결승점

이번 목표는 다음과 같다UI.

검색 단추가 지도의 오른쪽 상단에 표시됩니다.
나는 이렇게 지도의 특정 위치에 표시 버튼을 고정시키고 싶다.
게다가 이번에는 아이콘과 버튼UI으로 사용되고 있다native-base.
https://nativebase.io native-base 외에도 react-native-elements, react-native-paper 등UI과 관련된 유명한 도서관에는 여러 유파가 있어 자신의 환경에 맞는 것으로 바꿀 수 있다.
전제는 native-base의 버전은 다음과 같다.

[email protected]

코드

설치된 코드는 다음과 같습니다.
먼저 버튼ButtonViewButtonView.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.tsxMapComponent.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 응용편 1단의'지도에 덮인 버튼'으로 설치하는 방법을 소개했다.
지도 시스템의 응용 프로그램에서 지도에 거의 일부 정보를 그릴 뿐만 아니라 대부분은 필터 기능을 갖추고 있다.
이럴 때는 검색 화면의 도선으로 이번처럼 지도에 버튼을 놓는 경우가 많으니 참고할 수 있다면 좋겠다.