react native Linking使用

參考官方Linking

打電話

Linking.openURL('tel:10086')

打開網址

Linking.openURL('http://www.baidu.com')

發短信

Linking.openURL('sms:10086')

發郵件

Linking.openURL('mailto:[email protected]')

---

打開第三方應用

判斷引用是否安裝

Linking.canOpenURL(schema).then(supported => console.log(supported))

打開第三方應用

Linking.openURL(schema)

---

第三方schema

微信：weixin://
QQ：mqq://
知乎: zhihu://
知乎搜索: zhihu://search?q=
京東: openapp.jdmobile://
餓了麼: eleme://
支付寶: alipayqr://

地圖schema

ios內置地圖 

打開地圖: http://maps.apple.com/?q=://
獲取地圖路線: http://maps.apple.com/?saddr=SADDR&daddr=DADDR
搜索地圖: http://maps.apple.com/?q=QUERY&near=NEAR

下載地圖  

if(Platform.OS === 'ios') {
    Alert.alert('選擇地圖', '您還沒有安裝地圖軟件。', [
        { text: '下載高德地圖', onPress: () => Linking.openURL('https://apps.apple.com/cn/app/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE-%E7%B2%BE%E5%87%86%E5%9C%B0%E5%9B%BE-%E5%AF%BC%E8%88%AA%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87/id461703208') },
        { text: '下載百度地圖', onPress: () => Linking.openURL('https://apps.apple.com/cn/app/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE-%E8%B7%AF%E7%BA%BF%E8%A7%84%E5%88%92-%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87/id452186370') },
        { text: '下載騰訊地圖', onPress: () => Linking.openURL('https://apps.apple.com/cn/app/%E8%85%BE%E8%AE%AF%E5%9C%B0%E5%9B%BE-%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87%E7%9A%84%E5%AF%BC%E8%88%AA%E8%BD%AF%E4%BB%B6/id481623196') },
        { text: '取消' }
    ]);
}else {
    Alert.alert('選擇地圖', '您還沒有安裝地圖軟件。', [
        { text: '下載高德地圖', onPress: () => Linking.openURL('http://wap.amap.com/') },
        { text: '下載百度地圖', onPress: () => Linking.openURL('http://map.baidu.com/zt/client/index/') },
        { text: '下載騰訊地圖', onPress: () => Linking.openURL('https://mapdownload.map.qq.com/') },
        { text: '取消' }
    ]);
}

ios在 info.plist 中添加

<array>
    <string>baidumap</string>
    <string>qqmap</string>
    <string>iosamap</string>
</array>

百度地圖(參考這裏)

自定義打點: 
/**
 * location 位置 lat(緯度) lng(經度)
 * title 打點標題
 * content 打點內容
 * coord_type 座標類型 
 *    bd09ll：百度經緯度座標
 *    bd09mc：百度墨卡託座標
 *    gcj02：國測局加密座標
 *    wgs84：gps設備獲取的座標
 * traffic 是否開啓路況
 *    on 開啓
 *    off表示關閉
 * src 統計來源   參數格式爲: andr.companyName.appName
 */
ios: `baidumap://map/marker?location=40.047669,116.313082&title=我的位置&content=百度
android: `bdapp://map/marker?location=40.05740665572,116.2964407172&title=Marker&content=makeamarker&coord_type=gcj02&src=`

地址解析:
/**
 * address 地址名稱 
 */
ios: `baidumap://map/geocoder?address=北京市海淀區上地信息路9號奎科科技大廈&src=`
android: `bdapp://map/geocoder?address=北京市海淀區上地信息路9號奎科科技大廈&src=`

逆地理編碼:
ios: `baidumap://map/geocoder?location=39.990912172420714,116.32715863448607&coord_type=gcj02&src=`
android: `bdapp://map/geocoder?location=39.98871,116.43234&src=`

POI搜索(根據給定的關鍵字、檢索條件進行檢索):
/**
 * query  關鍵詞(必選)
 * region   城市名或縣名
 * radius 檢索半徑,單位:m
 */
ios: `baidumap://map/place/search?query=美食&region=上海&location=31.204055632862,121.41117785465&radius=1000&src=`
android: `bdapp://map/place/search?query=美食&region=北京&location=39.98871,116.43234&radius=1000&src=`

路線規劃:
/**
 * origin 起點名稱或經緯度 lat(緯度) lng(經度)
 * destination 終點名稱或經緯度 lat(緯度) lng(經度)
 * mode  交通方式  
 *    driving - 駕車 default
 *    riding - 騎行
 *    transit - 公交
 *    walking - 步行
 */
ios: `baidumap://map/direction?origin=name:西安城牆北|latlng:34.264642646862,108.95108518068&destination=name:上清橋|latlng:40.007623,116.360582&coord_type=bd09ll&mode=driving&src=`
android: `bdapp://map/direction?origin=name:對外經貿大學|latlng:39.98871,116.43234&destination=西直門&coord_type=bd09ll&mode=riding&src=`

公交、地鐵線路查詢:
/**
 * region 城市名或縣名
 * name 線路名稱
 */
ios: `baidumap://map/line?region=北京&name=909&src=`
android: `bdapp://map/line?region=北京&name=909&src=`

附近搜索:
/**
 * center  中心點經緯度
 *    經緯度：39.9761,116.3282
 *    經緯度和名稱：latlng:39.9761,116.3282|name:中關村
 * query  關鍵詞(必選)
 */
ios: `baidumap://map/nearbysearch?query=景點&src=`
android: `bdapp://map/place/nearby?query=景點&src=`

駕車導航:
ios: `baidumap://map/navi?query=天河公園&src=`
android: `bdapp://map/navi?query=天河公園&src=`

騎行導航:
ios: `baidumap://map/ridenavi?destination=39.91441,116.40405&coord_type=bd09ll&src=`
android: `bdapp://map/bikenavi?origin=39.98871,116.43234&destination=39.91441,116.40405&coord_type=bd09ll&src=`

電子狗:
ios: `baidumap://map/navi/cruiser?src=`
android: `bdapp://map/navi/cruiser?src=`

使用

 

Linking.canOpenURL(url)
    .then(supported => {
        if(supported) {
            Linking.openURL(url)
        }
    })

高德地圖(參考這裏)

導航:
/**
 * sourceApplication  第三方調用應用名稱
 * poiname    POI 名稱
 * lat  緯度
 * lon  經度
 * dev  是否偏移(0:lat 和 lon 是已經加密後的,不需要國測加密; 1:需要國測加密)
 */
ios: iosamap://navi?sourceApplication=applicationName&poiname=fangheng&poiid=BGVIS&lat=36.547901&lon=104.258354&dev=1&style=2
android: androidamap://navi?lat=36.547901&lon=104.258354

騎行導航:
/**
 * featureName    功能名稱，OnRideNavi 爲騎行導航
 * rideType   騎行類型
 *    elebike - 電動車
 *    bike - 或留空爲自行車
 */
ios: iosamap://openFeature?featureName=OnRideNavi&rideType=elebike&sourceApplication=appname&lat=23.2200491&lon=113.30764968&dev=1
android: androidamap://openFeature?featureName=OnRideNavi&lat=23.2200491&lon=113.30764968

地圖標註:
ios: iosamap://viewMap?sourceApplication=applicationName&poiname=萬恆購物中心&lat=39.98848272&lon=116.47560823&dev=1
android: androidamap://viewMap?lat=23.1200491&lon=113.30764968

路線規劃:
/**
 * sid    起點的POIID
 * slat   起點緯度,不填寫此參數則自動將用戶當前位置設爲起點緯度
 * slon   起點經度,不填寫此參數則自動將用戶當前位置設爲起點經度
 * sname  起點名稱
 * did    終點的POIID
 * dlat   終點緯度
 * dlon   終點經度
 * dname  終點名稱
 * t    t = 0（駕車）= 1（公交）= 2（步行）= 3（騎行）= 4（火車）= 5（長途客車）
 *      - （騎行僅在V7.8.8以上版本支持）
 * rideType   僅當 t = 3 時該參數生效。rideType = elebike    電動車，rideType = bike/爲空 自行車
 *    （電動車規劃僅在V8.65.0及以上版本支持）
 */
ios: iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=景山後街&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=廣順南大街&dev=0&t=0
android: amapuri://route/plan?sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=景山後街&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=廣順南大街&dev=0&t=0

公交線路查詢:
/**
 * busname    公交名稱
 * city   城市編碼或者城市名,參考城市代碼
 */
ios: iosamap://bus?&busname=445&city=010
android: androidamap://bus?&busname=445&city=010

周邊分類(搜索周邊的超市、銀行、加油站等分類信息):
/**
 * keyword    搜索關鍵字
 */
ios: iosamap://arroundpoi?sourceApplication=applicationName&keywords=超市&lat=36.2&lon=116.1&dev=0
android: androidamap://arroundpoi?keywords=銀行|加油站|電影院&dev=0

我的位置:
ios: iosamap://myLocation?
android: androidamap://myLocation?

搜索地點:
ios: iosamap://poi?sourceApplication=applicationName&name=加油站|電影院&dev=1
android:androidamap://poi?keywords=加油站|電影院&dev=1

騰訊地圖(參考這裏)

導航和路線規劃:
/**
 * type  路線規劃方式
 *    bus   公交
 *    drive 駕車
 *    walk  步行
 *    bike  騎行
 * from   起點名稱
 * fromcoord    起點座標(lat,lng)
 * to  終點名稱
 * tocoord  終點座標(lat,lng)
 * referer  開發者key
 */
qqmap://map/routeplan?type=drive&from=清華&fromcoord=39.994745,116.247282&to=怡和世家&tocoord=39.867192,116.493187&referer=

周邊搜索:
/**
 * keyword   搜索關鍵字
 * center    中心點位置
 * radius    以center爲中心的查詢範圍半徑，單位：米
 * referer  開發者key
 */
qqmap://map/search?keyword=美食&center=39.977169,116.336954&radius=1000&referer=

探索周邊:
/**
 * coord   lat<緯度>,lng<經度>，中心點經緯度
 * placeName    地點名稱，用於探索周邊頁面Title展示
 * referer  開發者key
 */
qqmap://map/nearby?coord=39.984026,116.307492&placeName=中關村&referer=

地點標註:
/**
 * marker    marker=markerAttributes|markerAttributes|... 
 *    coord：標的座標，格式：lat,lng 緯度在前經度在後 
 *    title：標註點名稱 
 *    addr：地址 
 *    各key和value之間用英文冒號分隔，各key/value對之間用英文分號分隔
 *    注：目前僅支持添加一個標註
 * referer  開發者key
 */
qqmap://map/marker?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口橋北鐵路道口&referer=