React Native调用系统的应用：电话、短信、邮件、浏览器等

我们知道RN帮我们封装了一个Linking的模块，这样我们就能调用系统的电话、短信、邮件、浏览器、地理位置等应用了，极大地方便了我们的功能实现。

本文介绍我的一个项目总用到的这些功能，当然示例demo依旧在github上（src-pages-me-more里面：https://github.com/LiuC520/react-native-jifenmao），这里呢只介绍如何使用，具体的更多的功能需要查看官方文档。

 一、配置环境：

1.1、android端基本上不需要配置的：

但是如果你想做下面的事：

1.1.1、如果你的应用被其注册过的外部url调起, 则可以在任何组件内这样获取和处理它.

componentDidMount(){

var
url =
Linking.getInitialURL().then((url)=>{

if(url){

console.log('Initial
url is: '+
url);

}

}).catch(err=>
console.error('An
error occurred',
err));}

注意: 如果想了解更多 Android 端的信息, 请查看 Enabling
Deep Links for App Content - Add Intent Filters for Your Deep Links.

1.1.2、如果要在现有的 

MainActivity

 中监听传入的 

intent

,
那么需要在AndroidManifest. 

xml

 中将

MainActivity

 的 

launchMode

 设置为 

singleTask

.
了解更多信息, 请查看 

<activity>

 文档.

<activity android:name=".MainActivity"
android:launchMode="singleTask">
1.1.3、但是你只是简单的调用系统的上述功能，上面两部不需要做的；
1.2、ios端配置

1.2.1、需要在*AppDelegate.m文件中添加：

#import"RCTLinkingManager.h"

-(BOOL)application:(UIApplication*)application
openURL:(NSURL*)url

sourceApplication:(NSString*)sourceApplication
annotation:(id)annotation{

return[RCTLinkingManager
application:application
openURL:url

sourceApplication:sourceApplication
annotation:annotation];}

//
Only if your app is using [Universal Links]
(https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html).

-(BOOL)application:(UIApplication*)application
continueUserActivity:(NSUserActivity*)userActivity

restorationHandler:(void(^)(NSArray*
_Nullable))restorationHandler{

return[RCTLinkingManager
application:application

continueUserActivity:userActivity

restorationHandler:restorationHandler];

}

1.2.2、但是因为我们没有RCTLinkingManager添加库头文件的路径，所以编译会报错，需要按照下图的步骤进行操作：



二、写代码喽：我遇到下面的一个问题，本来想按照下面的步骤操作，结果只要打开这个页面，就会自动把这几个linking打开，不用点击就能打开:

请注意：下面的代码是坑，不能用：

 <TouchableOpacity
onPress={this.linking('tel:18585025253')}>

    <Text style={{color:'red'}}>打电话给刘成：18585025253</Text>

  </TouchableOpacity>
linking=(url)=>{

    Linking.canOpenURL(url).then(supported => {

    if (!supported) {

      console.log('Can\'t handle url: ' + url);

    } else {

      return Linking.openURL(url);

    }

  }).catch(err => console.error('An error occurred', err));
}

正确的做法还是按照官网来操作：

首先封装一个点击的组件，把url和组件名字以属性的方式传进去：

如下所示：

class Touchable extends Component{

  constructor(props){

    super(props);

  }

  protoTypes:{

    url:React.ProtoTypes.string

  }

  render (){

    return(

      <TouchableOpacity onPress={()=>{

        Linking.canOpenURL(this.props.url).then(supported => {

          if (!supported) {

            console.log('Can\'t handle url: ' + this.props.url);

          } else {

            return Linking.openURL(this.props.url);

          }

        }).catch(err => console.error('An error occurred', err));

        }}>

        <MeItem lefttitle={this.props.title}/>

      </TouchableOpacity>

    )

  }

}

注意：上面的MeItem是我自己封装的一个组件，组件左边是标题，可以根据属性值更改，右边是一个箭头，你也可以用text后者其他组件代替

然后在组件中调用：

<Touchable url={'tel:18585025253'} title={'电话热线：18585025253'}
/>

           <Touchable url={'mailto:674668211@qq.com'} title={'发送邮件：674668211@qq.com'} />

           <Touchable url={'http://www.baidu.com'} title={'打开http网页'} />

           <Touchable url={'https://www.baidu.com'} title={'打开https网页'} />

           <Touchable url={'smsto:18585025253'} title={'发送短信'} />

最终的效果如下所示哦：