「React Native」调用原生打电话

一、场景

        点击某个按钮,弹出框提示是否拨打某个电话号码,点击确定调用原生(android/ios)拨号界面,并填充号码。

二、依赖

        react-native库提供Linking调用打开原生的功能。

三、实现

 let tel = 'tel:1008611'// 目标电话
      Alert.alert('提示', '提示内容',
        [ { text: '取消', onPress: () => { console.log('取消') } },
          { text: '确定',
            onPress: () => {
              Linking.canOpenURL(tel).then((supported) => {
                if (!supported) {
                  console.log('Can not handle tel:' + tel)
                } else {
                  return Linking.openURL(tel)
                }
              }).catch(error => console.log('tel error', error))
            } }])

特别注意:在ios模拟器上,调用拨打电话时,会弹出一个warning,这是因为ios模拟器不支持打电话。
因此在代码中添加了supported字段,判断是否可以处理,避免弹出warning。

四、Linking的其他用法

  1. 对于web链接来说,协议头("http://", "https://")不能省略!
  2. 可调用系统的其他应用,调用方式依然是判断是否安装应用,或者是否打开该url,再通过Linking.openURL启动。比如电话、短信、邮件。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3 119
  • 本文参加简小妹主办的【春节回家,写写你妈我妈他妈】征文活动”。 父爱如山,母爱如海。天底下,最无私、伟大的爱,那就...
    我爱吃任何鱼阅读 442评论 8 7
  • 有时候我觉得很不公平很不公平:有些人靠祖上生来就能很舒服地过日子,有些女人靠姿色或者运气嫁个好老公后就不用再费脑子...
    甜菜小笔阅读 265评论 0 1
  • 自此往恨更哪堪 ,薄情断,白首难 凝噎无语话参商,心虚乱,莫凭栏 句句薄幸句句残 与君别后甲子半,碧眸缠,泪痕干 ...
    当年倚马待斜阳阅读 200评论 1 1
  • 作者/Ionut Neagu 翻译/ONES Piece 杜敏軒、任宁译者按:如今远程工作的概念正热,作者经历了五...
    ONES_Piece阅读 1,133评论 2 9