{"id":347603,"date":"2023-05-18T15:01:02","date_gmt":"2023-05-18T15:01:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=347603"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=347603","title":{"rendered":"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 Swift \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f React Native \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Yandex Mapkit<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n

\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u042d\u0434\u0432\u0430\u0440\u0434, \u0438 \u044f Middle Front-end \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Stellar 2H Group. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 view \/ \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043f\u043e\u0434 React Native \u0438 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u043f\u043e\u0437\u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0430\u044e.<\/p>\n

\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Webstorm \u0438 XCode. \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0439\u0434\u0451\u0442 \u0441\u0432\u043e\u0439 \u043e\u0442\u043a\u043b\u0438\u043a, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u043f\u043e\u0434 android. \u041f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n

\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u044d\u043a\u0441\u043a\u0443\u0440\u0441 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0432 \u0442\u0435\u043c\u0435<\/h4>\n

React Native \u2014 \u044d\u0442\u043e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript \u0438 TypeScript, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 Facebook Inc. (\u043d\u044b\u043d\u0435 Meta*)<\/p>\n

\u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445<\/em> \u044f\u0437\u044b\u043a\u0430\u0445 \u0445\u043e\u0441\u0442-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c (ios\/android\/windows\/mac os). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Objective C, Swift, Kotlin, C++.<\/p>\n

\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/em><\/p>\n

\u0410 \u0447\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b? <\/h4>\n

\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 RN \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Fabric, \u043d\u043e \u0435\u0451 \u043c\u044b \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a><\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n

\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u043e\u0442 \u044d\u0442\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 native view, <\/strong>\u0434\u0430\u043b\u0435\u0435 Kotlin & Swift<\/strong> \u0438 \u0436\u0434\u0451\u043c, \u043f\u043e\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442\u0441\u044f \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/strong><\/p>\n

npx create-react-native-library@latest react-native-awesome-mapkit<\/code><\/p>\n

\u041f\u0440\u0435\u0434\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n
    \n
  1. \n

    \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (yarn<\/code> \/ npm i<\/code> \/ npm install<\/code>)<\/p>\n<\/li>\n

  2. \n

    \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 %\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435-\u0432\u0430\u0448\u0435\u0439-\u043b\u0438\u0431\u044b%.podspec (4.3.1 — \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438)<\/p>\n

    s.dependency \"YandexMapsMobile\", \"4.3.1-full\"<\/code><\/p>\n<\/li>\n

  3. \n

    cd example<\/code><\/p>\n<\/li>\n

  4. \n

    npx pod-install<\/code><\/p>\n<\/li>\n<\/ol>\n

    \u0413\u043e\u0442\u043e\u0432\u043e! \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/p>\n

    \u0428\u0430\u0433 0: \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/p>\n

    \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c example\/ios\/AwesomeMapkitExample.xcworkspace <\/strong>\u0432 XCode<\/p>\n

    \u0428\u0430\u0433 1: \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u043b\u044e\u0447 Yandex Mapkit \u0438 \u044f\u0437\u044b\u043a \u043a\u0430\u0440\u0442\u044b<\/strong><\/p>\n

    \u0412 example\/ios\/AwesomeMapkitExample\/AppDelegate.mm<\/strong> \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438:<\/p>\n

    #import <YandexMapsMobile\/YMKMapKitFactory.h>  ...  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   self.moduleName = @\"AwesomeMapkitExample\";   \/\/ You can add your custom initial props in the dictionary below.   \/\/ They will be passed down to the ViewController used by React Native.   self.initialProps = @{};    [YMKMapKit setApiKey:@\"\u0412\u0430\u0448 API \u043a\u043b\u044e\u0447\"];   \/\/ \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u041f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u044f\u0437\u044b\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b   [YMKMapKit setLocale:@\"ru_RU\"];   [[YMKMapKit mapKit] onStart];    return [super application:application didFinishLaunchingWithOptions:launchOptions]; }<\/code><\/pre>\n
    \u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f API \u043a\u043b\u044e\u0447 Yandex \u043a\u0430\u0440\u0442. \u0417\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0434 \u043a\u043b\u044e\u0447\u0430 \u0438 \u044f\u0437\u044b\u043a\u0430 \u043a\u0430\u0440\u0442\u044b \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0435\u0440\u0430<\/strong>. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u0438 \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432 \u043d\u0430\u0442\u0438\u0432<\/strong> (\u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 expo-dev-client)<\/p>\n
    \u0428\u0430\u0433 2: \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 view \u043a\u0430\u0440\u0442<\/strong><\/p>\n
    \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 ios<\/strong> \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 MapView<\/strong>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0438\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438: MapView.m<\/strong> \u0438 MapView.swift <\/strong>target \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c Pods-AwesomeMapkitExample<\/strong><\/p>\n
    \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 .swift \u0444\u0430\u0439\u043b\u0430 XCode \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c bridging header. \u041d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e\u0433\u043e, \u043e\u043d \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0442\u0438\u043f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Swift + Kotlin<\/em><\/p>\n
    \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c Swift \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e MapView:<\/p>\n
    import Foundation import React import YandexMapsMobile  \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 InitialCoords, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b Decodable struct InitialCoords: Decodable {   var lat: Double;   var lon: Double;      var zoom: Float;   var azimuth: Float;   var tilt: Float;      enum CodingKeys: String, CodingKey {     case lat     case lon     case zoom     case azimuth     case tilt   }      init(from decoder: Decoder) throws {     let container = try decoder.container(keyedBy: CodingKeys.self)     self.lat = try container.decode(Double.self, forKey: .lat)     self.lon = try container.decode(Double.self, forKey: .lon)     self.zoom = try container.decode(Float.self, forKey: .zoom)     self.azimuth = try container.decode(Float.self, forKey: .azimuth)     self.tilt = try container.decode(Float.self, forKey: .tilt)   } }  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434 \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 func isSimulator() -> Bool {   #if targetEnvironment(simulator)     return true   #else     return false   #endif }  \/\/ \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e view @objcMembers class MapView: UIView {     \/\/ \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 View Yandex \u043a\u0430\u0440\u0442\u044b     var ymkMapView: YMKMapView!          \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 JS \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u043e\u043f\u0441 initialRegion     func setInitialRegion(_ initialRegion: NSDictionary) {         \/\/ \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 swift \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443         let json = try! JSONSerialization.data(withJSONObject: initialRegion, options: [])         let region: InitialCoords = try! JSONDecoder().decode(InitialCoords.self, from: json)              \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0446\u0435\u043d\u0442\u0440\u043e\u043c \u043a\u0430\u043c\u0435\u0440\u044b         let cameraPoint = YMKPoint(latitude: region.lat, longitude: region.lon)         \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u043c\u0435\u0440\u0443         let cameraPosition = YMKCameraPosition(target: cameraPoint, zoom: region.zoom, azimuth: region.azimuth, tilt: region.tilt)              \/\/ \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043e\u0431\u0437\u043e\u0440 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438         ymkMapView.mapWindow.map.move(with: cameraPosition, animationType: YMKAnimation(type: YMKAnimationType.linear, duration: 0), cameraCallback: nil)     }          override init(frame: CGRect) {         super.init(frame: frame)                  \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0440\u0442\u044b         if ymkMapView == nil {             \/\/ \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e vulkanPreferred, \u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435,             \/\/ \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u043b\u0430\u0433\u043e\u0432             ymkMapView = YMKMapView(frame: CGRect.zero, vulkanPreferred: isSimulator())             clipsToBounds = true             addSubview(ymkMapView)         }    }         required init?(coder aDecoder: NSCoder) {         super.init(coder: aDecoder)     } }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e View @objc(MapViewManager) class MapViewManager: RCTViewManager {     var mapView: MapView!      override static func requiresMainQueueSetup() -> Bool {         false     }        override func view() -> UIView! {         mapView = MapView()              return mapView     } }<\/code><\/pre>\n
    \u0422\u0435 \u043b\u044e\u0434\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430 Objective C \u043c\u043e\u0433\u0443\u0442 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0437\u0430\u0447\u0435\u043c \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0432 Swift NSDictionary, \u0430 \u043d\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044e \u0435\u0433\u043e \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RCTConvert \u0432\u043d\u0443\u0442\u0440\u0438 Objective C? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439:<\/p>\n
    \"\u043a\u043e\u0440\u043e\u0442\u043a\u043e<\/p>\n
    \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0446\u0435\u043b\u044b\u0445 2 \u0434\u043d\u044f \u0432\u043f\u0443\u0441\u0442\u0443\u044e<\/figcaption><\/div>\n<\/figure>\n
    \u0418\u0442\u0430\u043a, \u0441\u043e Swift-\u0447\u0430\u0441\u0442\u044c\u044e \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Objective C \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0438 \u043f\u043e\u0439\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435:<\/p>\n
    \/\/ MapView.m #import <Foundation\/Foundation.h> #import <React\/RCTViewManager.h> #import <React\/RCTBridgeModule.h>  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 MapViewManager, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 MapView.swift @interface RCT_EXTERN_MODULE(MapViewManager, RCTViewManager)  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u043f\u0441 initialRegion RCT_EXPORT_VIEW_PROPERTY(initialRegion, NSDictionary)  @end<\/code><\/pre>\n
    \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438 JS \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n
    \/\/ src\/index.tsx import {   Platform,   requireNativeComponent,   UIManager,   ViewStyle, } from 'react-native';  type MapViewProps = {   style?: ViewStyle;   initialRegion: {     lat: number;     lon: number;     zoom: number;     azimuth: number;     tilt: number;   }; };  const LINKING_ERROR =   `The package 'react-native-awesome-mapkit' doesn't seem to be linked. Make sure: \\n\\n` +   Platform.select({ ios: \"- You have run 'pod install'\\n\", default: '' }) +   '- You rebuilt the app after installing the package\\n' +   '- You are not using Expo Go\\n';  const ComponentName = 'MapView';  export const MapView =   UIManager.getViewManagerConfig(ComponentName) != null     ? requireNativeComponent<MapViewProps>(ComponentName)     : () => {         throw new Error(LINKING_ERROR);       }; <\/code><\/pre>\n
    \/\/ example\/src\/App.tsx  import * as React from 'react';  import { MapView } from 'react-native-awesome-mapkit';  export default function App() {   return (     <MapView       style={{ flex: 1 }}       initialRegion={{         lat: 55.751574,         lon: 37.573856,         zoom: 15,         azimuth: 0,         tilt: 0,       }}     \/>   ); } <\/code><\/pre>\n
    \u0428\u0430\u0433 3: \u0420\u0430\u0434\u0443\u0435\u043c\u0441\u044f \u0436\u0438\u0437\u043d\u0438<\/strong><\/p>\n
    \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u0430\u043a:<\/p>\n
    yarn example start<\/code><\/p>\n
    yarn example ios<\/code><\/p>\n
    \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443, \u0442\u043e \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e! \u0423\u0440\u0430!<\/p>\n
    \"\u0423\u0440\u0430,<\/p>\n
    \u0423\u0440\u0430, \u043f\u043e\u0431\u0435\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n
    \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c children view, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b)<\/p>\n
    \u0414\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0438\u0441\u0442\u0441\u043a\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 (\u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0430<\/a> \u0442\u0430\u043a\u043e\u0439 21 \u043c\u0430\u0440\u0442\u0430 2022 \u0433\u043e\u0434\u0430) Meta Platforms \u0438\u043b\u0438 Meta* \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u0430 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438. \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0432\u043b\u0430\u0434\u0435\u0435\u0442 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0435\u0442\u044f\u043c\u0438 Facebook** \u0438 Instagram.<\/p>\n<\/div>\n<\/div>\n
      <\/div>\n
      
     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438      https:\/\/habr.com\/ru\/articles\/736106\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u042d\u0434\u0432\u0430\u0440\u0434, \u0438 \u044f Middle Front-end \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Stellar 2H Group. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 view \/ \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043f\u043e\u0434 React Native \u0438 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u043f\u043e\u0437\u0436\u0435 \u043f\u043e\u0432\u0435\u0434\u0430\u044e.<\/p>\n
    \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Webstorm \u0438 XCode. \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0439\u0434\u0451\u0442 \u0441\u0432\u043e\u0439 \u043e\u0442\u043a\u043b\u0438\u043a, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u043f\u043e\u0434 android. \u041f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n
    \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u044d\u043a\u0441\u043a\u0443\u0440\u0441 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0432 \u0442\u0435\u043c\u0435<\/h4>\n
    React Native \u2014 \u044d\u0442\u043e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 JavaScript \u0438 TypeScript, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 Facebook Inc. (\u043d\u044b\u043d\u0435 Meta*)<\/p>\n
    \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445<\/em> \u044f\u0437\u044b\u043a\u0430\u0445 \u0445\u043e\u0441\u0442-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c (ios\/android\/windows\/mac os). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Objective C, Swift, Kotlin, C++.<\/p>\n
    \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/em><\/p>\n
    \u0410 \u0447\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b? <\/h4>\n
    \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 RN \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Fabric, \u043d\u043e \u0435\u0451 \u043c\u044b \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a><\/p>\n
    \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n
    \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u043e\u0442 \u044d\u0442\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 native view, <\/strong>\u0434\u0430\u043b\u0435\u0435 Kotlin & Swift<\/strong> \u0438 \u0436\u0434\u0451\u043c, \u043f\u043e\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442\u0441\u044f \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/strong><\/p>\n
    npx create-react-native-library@latest react-native-awesome-mapkit<\/code><\/p>\n
    \u041f\u0440\u0435\u0434\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n
      \n
    1. \n
      \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (yarn<\/code> \/ npm i<\/code> \/ npm install<\/code>)<\/p>\n<\/li>\n
    2. \n
      \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 %\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435-\u0432\u0430\u0448\u0435\u0439-\u043b\u0438\u0431\u044b%.podspec (4.3.1 — \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438)<\/p>\n
      s.dependency \"YandexMapsMobile\", \"4.3.1-full\"<\/code><\/p>\n<\/li>\n
    3. \n
      cd example<\/code><\/p>\n<\/li>\n
    4. \n
      npx pod-install<\/code><\/p>\n<\/li>\n<\/ol>\n
      \u0413\u043e\u0442\u043e\u0432\u043e! \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/p>\n
      \u0428\u0430\u0433 0: \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/strong><\/p>\n
      \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c example\/ios\/AwesomeMapkitExample.xcworkspace <\/strong>\u0432 XCode<\/p>\n
      \u0428\u0430\u0433 1: \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u043b\u044e\u0447 Yandex Mapkit \u0438 \u044f\u0437\u044b\u043a \u043a\u0430\u0440\u0442\u044b<\/strong><\/p>\n
      \u0412 example\/ios\/AwesomeMapkitExample\/AppDelegate.mm<\/strong> \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438:<\/p>\n
      #import <YandexMapsMobile\/YMKMapKitFactory.h>  ...  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   self.moduleName = @\"AwesomeMapkitExample\";   \/\/ You can add your custom initial props in the dictionary below.   \/\/ They will be passed down to the ViewController used by React Native.   self.initialProps = @{};    [YMKMapKit setApiKey:@\"\u0412\u0430\u0448 API \u043a\u043b\u044e\u0447\"];   \/\/ \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u041f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u044f\u0437\u044b\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b   [YMKMapKit setLocale:@\"ru_RU\"];   [[YMKMapKit mapKit] onStart];    return [super application:application didFinishLaunchingWithOptions:launchOptions]; }<\/code><\/pre>\n
      \u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f API \u043a\u043b\u044e\u0447 Yandex \u043a\u0430\u0440\u0442. \u0417\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0434 \u043a\u043b\u044e\u0447\u0430 \u0438 \u044f\u0437\u044b\u043a\u0430 \u043a\u0430\u0440\u0442\u044b \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0435\u0440\u0430<\/strong>. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u044e\u0447 \u0438 \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432 \u043d\u0430\u0442\u0438\u0432<\/strong> (\u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 expo-dev-client)<\/p>\n
      \u0428\u0430\u0433 2: \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 view \u043a\u0430\u0440\u0442<\/strong><\/p>\n
      \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 ios<\/strong> \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 MapView<\/strong>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0438\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438: MapView.m<\/strong> \u0438 MapView.swift <\/strong>target \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c Pods-AwesomeMapkitExample<\/strong><\/p>\n
      \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 .swift \u0444\u0430\u0439\u043b\u0430 XCode \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c bridging header. \u041d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e\u0433\u043e, \u043e\u043d \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0442\u0438\u043f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Swift + Kotlin<\/em><\/p>\n
      \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c Swift \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e MapView:<\/p>\n
      import Foundation import React import YandexMapsMobile  \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 InitialCoords, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b Decodable struct InitialCoords: Decodable {   var lat: Double;   var lon: Double;      var zoom: Float;   var azimuth: Float;   var tilt: Float;      enum CodingKeys: String, CodingKey {     case lat     case lon     case zoom     case azimuth     case tilt   }      init(from decoder: Decoder) throws {     let container = try decoder.container(keyedBy: CodingKeys.self)     self.lat = try container.decode(Double.self, forKey: .lat)     self.lon = try container.decode(Double.self, forKey: .lon)     self.zoom = try container.decode(Float.self, forKey: .zoom)     self.azimuth = try container.decode(Float.self, forKey: .azimuth)     self.tilt = try container.decode(Float.self, forKey: .tilt)   } }  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434 \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 func isSimulator() -> Bool {   #if targetEnvironment(simulator)     return true   #else     return false   #endif }  \/\/ \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e view @objcMembers class MapView: UIView {     \/\/ \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 View Yandex \u043a\u0430\u0440\u0442\u044b     var ymkMapView: YMKMapView!          \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 JS \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u043e\u043f\u0441 initialRegion     func setInitialRegion(_ initialRegion: NSDictionary) {         \/\/ \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 swift \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443         let json = try! JSONSerialization.data(withJSONObject: initialRegion, options: [])         let region: InitialCoords = try! JSONDecoder().decode(InitialCoords.self, from: json)              \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0446\u0435\u043d\u0442\u0440\u043e\u043c \u043a\u0430\u043c\u0435\u0440\u044b         let cameraPoint = YMKPoint(latitude: region.lat, longitude: region.lon)         \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u043c\u0435\u0440\u0443         let cameraPosition = YMKCameraPosition(target: cameraPoint, zoom: region.zoom, azimuth: region.azimuth, tilt: region.tilt)              \/\/ \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043e\u0431\u0437\u043e\u0440 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438         ymkMapView.mapWindow.map.move(with: cameraPosition, animationType: YMKAnimation(type: YMKAnimationType.linear, duration: 0), cameraCallback: nil)     }          override init(frame: CGRect) {         super.init(frame: frame)                  \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0440\u0442\u044b         if ymkMapView == nil {             \/\/ \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e vulkanPreferred, \u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435,             \/\/ \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u043b\u0430\u0433\u043e\u0432             ymkMapView = YMKMapView(frame: CGRect.zero, vulkanPreferred: isSimulator())             clipsToBounds = true             addSubview(ymkMapView)         }    }         required init?(coder aDecoder: NSCoder) {         super.init(coder: aDecoder)     } }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e View @objc(MapViewManager) class MapViewManager: RCTViewManager {     var mapView: MapView!      override static func requiresMainQueueSetup() -> Bool {         false     }        override func view() -> UIView! {         mapView = MapView()              return mapView     } }<\/code><\/pre>\n
      \u0422\u0435 \u043b\u044e\u0434\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430 Objective C \u043c\u043e\u0433\u0443\u0442 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c, \u0437\u0430\u0447\u0435\u043c \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0432 Swift NSDictionary, \u0430 \u043d\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u044e \u0435\u0433\u043e \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RCTConvert \u0432\u043d\u0443\u0442\u0440\u0438 Objective C? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439:<\/p>\n
      \n
      \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0446\u0435\u043b\u044b\u0445 2 \u0434\u043d\u044f \u0432\u043f\u0443\u0441\u0442\u0443\u044e<\/figcaption><\/div>\n<\/figure>\n
      \u0418\u0442\u0430\u043a, \u0441\u043e Swift-\u0447\u0430\u0441\u0442\u044c\u044e \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Objective C \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0438 \u043f\u043e\u0439\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0441\u0438\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0435:<\/p>\n
      \/\/ MapView.m #import <Foundation\/Foundation.h> #import <React\/RCTViewManager.h> #import <React\/RCTBridgeModule.h>  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 MapViewManager, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 MapView.swift @interface RCT_EXTERN_MODULE(MapViewManager, RCTViewManager)  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u043f\u0441 initialRegion RCT_EXPORT_VIEW_PROPERTY(initialRegion, NSDictionary)  @end<\/code><\/pre>\n
      \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438 JS \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n
      \/\/ src\/index.tsx import {   Platform,   requireNativeComponent,   UIManager,   ViewStyle, } from 'react-native';  type MapViewProps = {   style?: ViewStyle;   initialRegion: {     lat: number;     lon: number;     zoom: number;     azimuth: number;     tilt: number;   }; };  const LINKING_ERROR =   `The package 'react-native-awesome-mapkit' doesn't seem to be linked. Make sure: \\n\\n` +   Platform.select({ ios: \"- You have run 'pod install'\\n\", default: '' }) +   '- You rebuilt the app after installing the package\\n' +   '- You are not using Expo Go\\n';  const ComponentName = 'MapView';  export const MapView =   UIManager.getViewManagerConfig(ComponentName) != null     ? requireNativeComponent<MapViewProps>(ComponentName)     : () => {         throw new Error(LINKING_ERROR);       }; <\/code><\/pre>\n
      \/\/ example\/src\/App.tsx  import * as React from 'react';  import { MapView } from 'react-native-awesome-mapkit';  export default function App() {   return (     <MapView       style={{ flex: 1 }}       initialRegion={{         lat: 55.751574,         lon: 37.573856,         zoom: 15,         azimuth: 0,         tilt: 0,       }}     \/>   ); } <\/code><\/pre>\n
      \u0428\u0430\u0433 3: \u0420\u0430\u0434\u0443\u0435\u043c\u0441\u044f \u0436\u0438\u0437\u043d\u0438<\/strong><\/p>\n
      \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u0430\u043a:<\/p>\n
      yarn example start<\/code><\/p>\n
      yarn example ios<\/code><\/p>\n
      \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443, \u0442\u043e \u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e! \u0423\u0440\u0430!<\/p>\n
      \n
      \u0423\u0440\u0430, \u043f\u043e\u0431\u0435\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n
      \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c children view, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b)<\/p>\n
      \u0414\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0438\u0441\u0442\u0441\u043a\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 (\u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0430<\/a> \u0442\u0430\u043a\u043e\u0439 21 \u043c\u0430\u0440\u0442\u0430 2022 \u0433\u043e\u0434\u0430) Meta Platforms \u0438\u043b\u0438 Meta* \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u0430 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438. \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0432\u043b\u0430\u0434\u0435\u0435\u0442 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0435\u0442\u044f\u043c\u0438 Facebook** \u0438 Instagram.<\/p>\n<\/div>\n<\/div>\n
        <\/div>\n
        
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438        https:\/\/habr.com\/ru\/articles\/736106\/<\/a>
      <\/br><\/br><\/br><\/br><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-347603","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/347603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=347603"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/347603\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=347603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=347603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=347603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}