Linking提供了一個通用的接口來與傳入和傳出的 App 鏈接進行交互

背景

• 官方文檔
• 在App開發中我們經常會用到Linking跳轉，如：跳轉應用市場，撥打手機號，打開微信等等。
• 下面針對這些需求進行了基本的封裝。

跳轉App應用市場

/**
 * app應用市場下載
 * iOS： itms-apps://itunes.apple.com/cn/app/  +【名稱】/【id + id編號】 如：itms-apps://itunes.apple.com/cn/app/wei-xin/id414478124
 * android: market://details?id= + 【app 包名】 如： market://details?id=com.tencent.mm
 * @param {*} address 下載地址
 */
export const openMarket = ({ androidAddress = '', iOSAddress = '' }) => {
  const linkingUrl = Platform.OS === 'ios' ? `itms-apps://itunes.apple.com/cn/app/${iOSAddress}` : `market://details?id=${androidAddress}`
  Linking.canOpenURL(linkingUrl).then(async supported => {
    if (supported) {
      Linking.openURL(linkingUrl)
    } else {
      Toast.show('找不到可提供下載的應用市場')
    }
  })
}

撥打手機號

/**
 * 撥打手機
 * @param {*} tel 手機號
 */
export const openTel = (tel) => {
  Linking.canOpenURL(`tel:${tel}`).then(async supported => {
    if (supported) {
      Linking.openURL(`tel:${tel}`)
    } else {
      await Clipboard.setString(tel)
      Toast.show('您的設備不支持，已為您復制手機號！')
    }
  })
}

打開微信

export const openWechat = () => {
 Linking.canOpenURL('weixin://').then(supported => {
   if (supported) {
     Linking.openURL('weixin://')
   } else {
     Alert.alert('沒有安裝微信',
       '請先安裝微信客戶端再打開',
       [
         { text: '取消' },
         { text: '安裝',
           onPress: () => {
             openMarket({
               androidAddress: 'com.tencent.mm',
               iOSAddress: 'wei-xin/id414478124'
             })
           } }
       ])
   }
 })
}

瀏覽器打開鏈接

/**
 * 打開瀏覽器
 * @param {*} url url地址
 */
export const openWebBrowser = (url) => {
  Linking.canOpenURL(url).then(supported => {
    if (supported) {
      Linking.openURL(url)
    } else {
      Toast.show('找不到可以打開的瀏覽器')
    }
  })
}

React Navigation深度鏈接

• 結合React Navigation我們可以打開App并跳轉到App任何界面
• 應用場景：用戶點擊推送消息，打開App并跳轉到消息詳情界面。
• 假設App中我們有OrderDetailScreen這個界面，router配置如下：

const mainNavigator = createStackNavigator({
....
  order_detail: {
    screen: OrderDetailScreen,
    path: 'order_detail'
  }
....

• 我們可以使用以下命令跳轉到詳情頁面

return Linking.canOpenURL('myapp://main/order_detail').then(supported => {
        if (!supported) {
          console.log('Can\'t handle url: myapp://main/order_detail')
        } else {
          return Linking.openURL('myapp://main/order_detail/' + data.money)
        }
      }).catch(err => console.error('An error occurred', err))

• 具體配置可以查看 React Navigation文檔

常用URL Scheme

/**
  一、常用URL Scheme
    QQ: mqq://
    微信: weixin://
    新浪微博: weibo:// (sinaweibo://)
    騰訊微博: tencentweibo://
    淘寶: taobao://
    支付寶: alipay://
    美團: imeituan://
    知乎: zhihu://
    優酷: youku://
  二、配置Scheme白名單（僅ios，Android平臺不需要）
    在項目的info.plist中添加一LSApplicationQueriesSchemes，類型為Array。
    添加需要支持的項目，類型為字符串類型；
 */