Tích hợp Map trong React Native

Tram Ho

Giới thiệu

Bài viết này mình sẽ giới thiệu cho các bạn việc tích hợp Map vào React Native App với thư viện react-native-maps.

Với thư viện này thì trên thiết bị Android sẽ sử dụng Google Maps, còn trên thiết bị iOS có thể sử dụng Google Maps hoặc Apple Map.

Cài đặt

Đầu tiên, hãy chạy lệnh sau để cài đặt thư viện:

hoặc

Cấu hình trên iOS


Sử dụng React Native Link (React Native <= 0.59)

Chạy lệnh react-native link react-native-maps để link thư viện, chạy xong là chúng ta có thể sử dụng thư viện này trên iOS

Sử dụng CocoaPods (React Native <= 0.59)

Sửa Podfile ở thư mục ios/Podfile, thay thế _YOUR_PROJECT_TARGET_ với target project của bạn (mặc định là tên project)

Sau đó chạy các lệnh:

và mở file workspace (.xcworkspace) ở XCode để build project.

Sử dụng CocoaPods (React Native >= 60)

Đối với React Native phiên bản >= 60 thì bạn chỉ cần chạy các lệnh:

Cấu hình trên Android

  1. (React Native <= 0.59) thêm react-native-maps project vào android/settings.gradle:

  1. (React Native <= 0.59) thêm dependency react-native-maps vào android/app/build.gradle:

  1. Thêm dependency gms service vào android/app/build.gradle:

  1. Thêm Google Map API Key vào file manifest (android/app/src/main/AndroidManifest.xml)

Để lấy API Key: https://developers.google.com/maps/documentation/android-api/signup

  1. (React Native <= 0.59) Thêm import com.airbnb.android.react.maps.MapsPackage;new MapsPackage() vào file MainApplication.java:

Sử dụng

Thư việnreact-native-maps cung cấp các component:

Sử dụng chung

Component MapView chính là component cha, được dựng lên từ các component khác như Marker, Polygon … là component con của MapView

Render Map với khu vực khởi tạo

Với kinh độ (logitude) và vĩ độ (latitude) cho trước ta có thể render Map hiển thị:

Render Map khi thay đổi khu vực

Render các Marker:

Render Marker với custom image:

Lấy Snapshot Map

Kết luận

Còn rất nhiều tính năng với map được hỗ trợ bởi thư viện này, mời bạn tham khảo thêm tại: https://github.com/react-native-community/react-native-maps

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo