第一种方法:
Linking:调用系统的电话、短信、邮件、浏览器等功能
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));
调用系统的电话功能
tel:10086
Android:直接到转到系统拨号页面,没有问题
iOS:弹出一个alert,显示电话号码,一个取消按钮,一个确定按钮
点击确定拨打电话,没有问题
点击取消不打电话,程序崩溃提示错误(我看不懂),有问题,暂未解决
NO2.调用系统的短信功能
smsto:10086
Android:跳转发短信界面,没有问题
iOS:无法跳转到发短信界面,一直提示没有权限
然而打电话、发短信、Safari浏览器并不需要权限,有问题,暂未解决
NO3.调用系统的邮件功能
mailto:xxxxxxxxx@qq.com
Android:没有问题
iOS:没有问题
NO4.调用系统的浏览器功能
http://www.baidu.com
Android:没有问题
iOS:没有问题
有人说ReactNative和原生的进行交互,RN将参数传给原生的,然后调用原生的进行操作
这也是一个办法,但是我还不会RN和原生交互,暂且不表
第二种方法:
三方组件:react-native-communications
地址:https://github.com/anarchicknight/react-native-communications
网址里面的 README.md 写的非常的清楚,而且还有例子可供参考,相当方便,iOS和Android亲测没有问题
强烈推荐大家看一下
使用很简单
npm install react-native-communications
import Communications from 'react-native-communications';
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={{height:40,marginTop:40}}
onPress={()=>{
Communications.phonecall('10086', false);
}}>
<Text>调用系统打电话功能</Text>
</TouchableOpacity><TouchableOpacity style={{height:40,marginTop:40}}
onPress={()=>{
Communications.text('10086','要发送的内容');
Communications.textWithoutEncoding('10086','要发送的内容encoding');//这种方法需要将内容encoding
}}>
<Text>调用系统发短信功能</Text>
</TouchableOpacity><TouchableOpacity style={{height:40,marginTop:40}}
onPress={()=>{
Communications.email(['emailAddress1', 'emailAddress2'],null,null,'My Subject','My body text')
}}>
<Text>调用系统发邮件功能</Text>
</TouchableOpacity><TouchableOpacity style={{height:40,marginTop:40}}
onPress={()=>{
Communications.web('https://github.com/facebook/react-native')
}}>
<Text>调用系统打开网页功能</Text>
</TouchableOpacity>
</View>
);
}
没毛病啊老铁,双击666,飞机大炮走着