我们知道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={'发送短信'} />
最终的效果如下所示哦: