UI–элементы

Карта

Все варианты поставки SDK содержат стандартный набор React-компонентов для управления картой. Компоненты добавляются поверх MapView в обычной разметке React Native и получают экземпляр map из MapController.

Стандартный набор включает:

1. IndoorControl для переключения этажей.
2. TrafficControl для отображения уровня пробок и управления видимостью пробок на карте.
3. ZoomControl для масштабирования карты.
4. CompassControl для отображения текущего угла поворота карты относительно севера.
5. MyLocationControl для перелёта к текущему местоположению пользователя.
6. CopyrightControl для отображения копирайта внутри MapView. Копирайт появляется автоматически, а его положение можно настроить через свойства copyrightAlignment и copyrightEdgeInsets объекта MapViewProps.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  CompassControl,
  IndoorControl,
  MapView,
  MyLocationControl,
  TrafficControl,
  ZoomControl,
  type MapControllerState,
} from '@2gis/dgis-mobile-sdk-full';

export function MapWithControls({
  controllerState,
  requestLocationPermission,
}: {
  controllerState: MapControllerState;
  requestLocationPermission: () => void;
}) {
  const map =
    controllerState.status === 'ready' ? controllerState.controller.map : null;

  return (
    <View style={styles.root}>
      <MapView controllerState={controllerState} style={styles.map} />
      {map !== null && (
        <>
          <View style={styles.rightControls}>
            <TrafficControl map={map} />
            <CompassControl map={map} />
            <ZoomControl map={map} />
          </View>
          <View style={styles.leftControls}>
            <IndoorControl map={map} />
            <MyLocationControl
              map={map}
              onPermissionRequest={requestLocationPermission}
            />
          </View>
        </>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
  map: { flex: 1 },
  rightControls: {
    position: 'absolute',
    right: 16,
    bottom: 32,
    gap: 8,
  },
  leftControls: {
    position: 'absolute',
    left: 16,
    bottom: 32,
    gap: 8,
  },
});

Чтобы изменить цвета компонентов, используйте фабрики из SDK:

import {
  makeTrafficControlColors,
  makeZoomControlColors,
} from '@2gis/dgis-mobile-sdk-full';

const palette = {
  background: '#1F2937',
  transparentBackground: 'rgba(31,41,55,0.6)',
  primaryContent: '#FFFFFF',
  tertiaryContent: '#9CA3AF',
  quaternaryContent: '#4B5563',
  activeContent: '#38BDF8',
  lowAlert: '#22C55E',
  mediumAlert: '#F59E0B',
  highAlert: '#EF4444',
};

<TrafficControl map={map} colors={makeTrafficControlColors(palette)} />;
<ZoomControl map={map} colors={makeZoomControlColors(palette)} />;

Справочник

В текущем React Native SDK готовый поисковый виджет не экспортируется. Вы можете создать поисковую строку и список результатов на стороне приложения, используя SearchManager.suggest() и SearchManager.search().

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { FlatList, Text, TextInput, View } from 'react-native';
import {
  SearchManager,
  SuggestQueryBuilder,
  type Context,
  type Suggest,
} from '@2gis/dgis-mobile-sdk-full';

export function SearchBox({ context }: { context: Context }) {
  const searchManager = useMemo(
    () => SearchManager.createOnlineManager(context),
    [context],
  );
  const [suggests, setSuggests] = useState<Suggest[]>([]);
  const futureRef = useRef<ReturnType<SearchManager['suggest']> | null>(null);

  useEffect(() => {
    return () => {
      futureRef.current?.destroy();
      searchManager.destroy();
    };
  }, [searchManager]);

  const onChangeText = (text: string) => {
    if (text.trim() === '') {
      setSuggests([]);
      return;
    }

    futureRef.current?.destroy();

    const query = SuggestQueryBuilder.fromQueryText(text).build();
    const future = searchManager.suggest(query);
    futureRef.current = future;

    future.onComplete(
      result => {
        if (futureRef.current !== future) {
          return;
        }

        futureRef.current = null;
        setSuggests(result.suggests);
        future.destroy();
      },
      error => {
        if (futureRef.current !== future) {
          return;
        }

        futureRef.current = null;
        console.warn(error);
        future.destroy();
      },
    );
  };

  return (
    <View>
      <TextInput onChangeText={onChangeText} />
      <FlatList
        data={suggests}
        keyExtractor={(item, index) => `${item.title.text}-${index}`}
        renderItem={({ item }) => <Text>{item.title.text}</Text>}
      />
    </View>
  );
}