Bản đồ cho app Expo — VIETMAP GL React Native SDK

Thư viện React Native để dựng bản đồ, dựa trên Vietmap GL Native SDK cho iOS và Android.

@vietmap/vietmap-gl-react-native hiển thị vector tile của VIETMAP trong app Expo hoặc React Native thuần, cùng dữ liệu với SDK Web và SDK native Android/iOS: dữ liệu Việt Nam chi tiết tới thôn, ấp, cập nhật hàng tuần. Tile vector được vẽ bằng native nên kéo, zoom mượt ở 60fps và đổi được style lúc đang chạy.

Khác với react-native-maps (hiển thị bản đồ nền Google hoặc Apple), SDK này hiển thị bản đồ của chính VIETMAP và dùng chung API key với các API tìm địa chỉ, chỉ đường và phí cầu đường.

Không chạy được trên Expo Go

SDK có code native nên không chạy trong app Expo Go, vì Expo Go chỉ chứa các module native do Expo đóng gói sẵn. Hãy dùng development build (expo prebuild rồi chạy local, hoặc EAS Build). Build trên EAS cloud chạy bình thường. Không cần eject.

Bắt đầu

QUAN TRỌNG

Làm theo các bước dưới thì app không chạy được trên Expo Go nữa, phải debug bằng development build. Build trên EAS cloud vẫn chạy bình thường.

Thêm package

yarn add @vietmap/vietmap-gl-react-native

Phiên bản mới nhất xem tại https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native

Chạy prebuild để sinh thư mục android và ios

npx expo prebuild

Thêm thư mục android và ios vào .gitignore

echo "/android/" >> .gitignore && echo "/ios/" >> .gitignore

Khi chạy eas build, Expo cloud tự sinh lại hai thư mục android và ios.

"Prebuild" just generates the native android and ios projects and 
applies any config plugins while doing so.

On the build server, if the android and ios directories are missing, 
then the build server will automatically run prebuild to generate them.

So while prebuild is required for every Expo app, the user 
has the choice of running it themselves and uploading it to the build servers, 
or letting the build servers generate the native projects.

Also, if you run `npx expo run` then it will first prebuild and then build using 
`gradlew/xcodebuild`.

Xem thêm: https://docs.expo.dev/workflow/continuous-native-generation/

Cấu hình native

• Cần cấu hình thêm cho module native thì làm như sau. Thêm một object con vào object ios trong app.json, ví dụ:

"infoPlist": {
  "NSLocationWhenInUseUsageDescription": "When in use permissions description"
},
"android":{
    ...
    "permission":["YOUR_PERMISSION_HERE"],
    ...
}

Hiển thị bản đồ

Thêm đoạn sau vào package.json

    "@vietmap/vietmap-gl-react-native": "^0.0.6",
    "@react-navigation/native": "5.7.3",
    "@react-navigation/stack": "5.9.0",
    "@types/geojson": "^7946.0.14",
    "react-native-elements": "3.4.3",
    "react-native-gesture-handler": "1.10.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-select-dropdown": "3.4.0",
    "react-native-vector-icons": "^10.0.3"

Chạy npm i hoặc yarn install để cài package

Thêm hai file ShowMap.js và Navigation.js vào thư mục gốc dự án

Thêm đoạn sau vào App.js hoặc App.tsx

export default function App() {
  return (
    <SafeAreaView style={{flex:1}}>
      <Navigation />
    </SafeAreaView>
  );
}

Chạy dự án

Tài liệu đầy đủ xem ở SDK React Native hoặc repository trên GitHub