相關源碼
同志們好，我又迴歸了，本來是想分享Flutter相關的內容，但是好久不寫文章，感覺生疏了不少，不知道從何處下筆了，所有就把草稿箱躺了快一年的內容整理一下，分享分享。這篇文章是使用最簡單的方式實現地圖導航的需求，那就是通過喚起手機中的導航類軟件進行導航，所以你想在應用內實現導航以及定製導航路線，那就可以到此爲止了（如果有應用內導航需求或者線路規劃需求的，留言，我可以寫個底層的插件（android端，此時需要有個寫ios底層合作的了）。
很多人都認爲喚起導航軟件進行導航，需要底層去寫實現，其實大可不必，通過ReactNative自帶的一些Api就可以實現我們想要的效果了。
Linking
Linking是RN中APP之間跳轉交互的Api接口，並且能解析其中攜帶的參數數據。
- getInitialURL
當我們的應用被其它應用註冊喚醒，我們就可以通過它進行一些邏輯的處理，底層App喚醒的一些配置就不介紹了android 可前往https://developer.android.com/training/app-links/deep-linking#adding-filters 查看，ios自行搜索。這種需求在很多企業內多個應用直接經常會用到，在RN中使用很簡單，只需要在首頁組件的componentDidMount方法中註冊就可以了，當然，官方文檔中也有說明，在任何組件都可以獲取到url參數。
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
//可以根據url寫跳轉到相應的頁面的邏輯和參數
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
- openURL
這個方法其實就是我們這篇文章的實現最重要的方法之一了，我們就可以通過他來打開第三方的App,下面列舉幾個常見的使用
Linking.openURL(url).catch(err => console.error('An error occurred', err));
//如打開瀏覽器訪問
Linking.openURL("https://github.com/xiehui999")
//撥打電話
Linking.openURL("tel:1008611")
//發送短信
Linking.openURL("smsto:10086")
需要注意的是，在ios9.0及以上需要配置LSApplicationQueriesSchemes，否則調用無效。
- canOpenURL
很多時候我們需要先判斷判斷設備上是否有已經安裝的應用可以處理指定的 URL，該方法就可實現此功能，ios9需要配置LSApplicationQueriesSchemes，否則會一直返回false.
百度
- url
baidumap://map/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving®ion=西安&output=html&src=webapp.baidu.openAPIdemo
//調起百度PC或Web地圖，展示"西安市"從（lat:34.264642646862,lng:108.95108518068 ）"我家"到"大雁塔"的駕車路線。
origin是必填項，後更導航起始點經緯度，name是導航地圖顯示的marker提示信息。destination是導航終點的經緯度或者名稱。
mode指定導航路線的方法包括可選transit（公交）、driving（駕車）、walking（步行）和riding（騎行）(ios多個navigation)。根據自己的需求使用
其它具體參數可查看百度官方文檔
高德
喚起高德地圖規劃線路的url前綴略有不同，基本內容還是一樣的
//Android
amapuri://route/plan/?
//iOS
iosamap://path?
//後面追加內容
sourceApplication=test&slat=39.92848272&slon=116.39560823&sname=A&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0
s開通的表示起點信息，不填默認當前位置，d開頭的爲終點信息，t爲導航規劃路線的方式 t = 0（駕車）= 1（公交）= 2（步行）= 3（騎行）= 4（火車）= 5（長途客車）
騰訊
qqmap://map/routeplan?type=drive&from=清華&fromcoord=39.994745,116.247282&to=怡和世家&tocoord=39.867192,116.493187&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
type路徑規劃方式，路線規劃方式參數：分別爲公交：bus ，駕車：drive ，步行：walk ，騎行：bike，from 開頭的爲起點信息，to開頭的爲終點信息，需要注意的是referer參數，官方文檔說該參數爲申請的騰訊地圖的開發key.
通過上面的分析，我們就可以實現導航了，下面我們就簡單的封裝一下一個導航的工具類，包括三個判斷是否安裝相應地圖軟件的方法，和相應打開地圖導航的方法
static isInstallAmap = () => {
return new Promise((resolve, reject) => {
Linking.canOpenURL(Platform.OS === "android" ? "amapuri://route/plan/" : "iosamap://path").then(supported => {
resolve(supported)
}).catch(resolve(false))
})
}
/**
* 打開高德地圖導航
* @param {String} data.sname - 起點名字.
* @param {String|number} data.slon - 起點經度.
* @param {String|number} data.slat - 起點緯度.
* @param {String} data.dname - 終點名字.
* @param {String|number} data.dlon - 終點經度.
* @param {String|number} data.dlat - 終點緯度.
* @param{Mode} data.mode 導航類型
* @param data
*/
static openAmap = (data = {}) => {
let base = Platform.OS === "android" ? "amapuri://route/plan/？" : "iosamap://path？"
return new Promise((resolve, reject) => {
//起點經緯度不傳，則自動將用戶當前位置設爲起點
if (!data.dlat || !data.dlon) {
resolve("需要終點經緯度")
} else {
if (data.slon && data.slat) {
base += `&slat=${data.slat}&slon=${data.slon}`
}
if (data.sname) {
base += `&sname=${data.sname}`
}
if (data.dname) {
base += `&dname=${data.dname}`
}
base += `&dlat=${data.dlat}&dlon=${data.dlon}&dev=0&t=${data.mode ? (data.mode.amap || 0) : 0}`
Linking.openURL(base).then(res => {
}).catch(err => {
reject("暫無安裝高德地圖")
})
}
});
}
上面我貼出了一個判斷安裝和一個喚起軟件導航的方法，其它幾種按此實現即可，當然我也把整理好的文件上傳到GitHub了，具體細節可以前往RoutePlan文件,使用demo可前往RoutePlanExample文件，可以直接下載demo。