「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启动。比如电话、短信、邮件。

你可能感兴趣的:(「React Native」调用原生打电话)