原文链接:https://www.f2er.com/react/304490.htmlLinking提供了一个通用的接口来与传入和传出的App链接进行交互,我介绍的Linking的传出,比如跳转外部链接,打电话,发邮件,打开某个浏览器链接。
下面写个简单的打电话例子,仅供参考
import React,{ Component} from 'react'; import {Slider,ListView,Linking,Text,ScrollView,View,Switch,TouchableOpacity,Dimensions,StyleSheet,Alert,Platform,Image,TextInput,Clipboard,boolean} from "react-native"; import Commons,{Link,RefreshListView,RefreshScrollView} from 'commons'; import Apis,{TalentUserBase} from "app-js-sdk"; export default class ContactTalentScreen extends Component { commons: Commons = new Commons().bind(this); constructor(props) { super(props); } static navigatorStyle = { navBarHidden: true,tabBarHidden:true,}; state = { parentTalentUser:TalentUserBase,}; componentDidMount() { this.commons.apis.userApi.getTalentUser().then((m:TalentUserBase)=>{ this.setState({ parentTalentUser:m,}); }) } clearClose = ()=>{ //关闭弹框 this.props.navigator.dismissLightBox(); } //拨打电话 linking=(url)=>{ console.log(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)); } //复制手机号 async _setClipboardContent(tel){ Clipboard.setString(tel); try { var content = await Clipboard.getString(); console.log('复制的手机号:'); this.clearClose(); console.log(content); //ToastAndroid.show('粘贴板的内容为:'+content,ToastAndroid.SHORT); } catch (e) { //ToastAndroid.show(e.message,ToastAndroid.SHORT); } } render() { const {height,width} = Dimensions.get('window'); return ( <View style={[styles.wrap,{width:width,height:height}]}> <View style={[styles.pop,{width:width}]}> <View style={styles.item}> <Text style={styles.user_name}>{this.state.parentTalentUser.realname} {this.state.parentTalentUser.tel} 你可以</Text> </View> <View style={styles.solid}></View> <View style={styles.bg_white}> <TouchableOpacity style={styles.item} activeOpacity={0.5} onPress={()=>this.linking('tel:'+this.state.parentTalentUser.tel)}> <Text style={styles.title}>呼叫</Text> </TouchableOpacity> </View> <View style={styles.solid}></View> <View style={styles.bg_white}> <TouchableOpacity style={styles.item} activeOpacity={0.5} onPress={()=>this._setClipboardContent(this.state.parentTalentUser.tel)}> <Text style={styles.title}>复制号码</Text> </TouchableOpacity> </View> <View style={styles.h9}></View> <View style={styles.bg_white}> <TouchableOpacity style={styles.item} activeOpacity={0.5} onPress={()=>this.clearClose()}> <Text style={styles.title}>取消</Text> </TouchableOpacity> </View> </View> </View> ); } } const styles = StyleSheet.create({ wrap:{ },pop:{ position:'absolute',bottom:0,left:0,zIndex:100,},item:{ flexDirection: 'row',height:50,justifyContent:'center',alignItems:'center',backgroundColor:'#fff',paddingLeft:15,paddingRight:15,title:{ fontSize:15,color:'#333',user_name:{ fontSize:12,color:'#888' },h9:{ height:9,backgroundColor:'#f0f0f0',solid:{ height:0.5,bg_white:{ backgroundColor:'#fff',});1.要启动一个链接相对应的应用(打开浏览器、邮箱或者其它的应用),只需调用
Linking.openURL(url).catch(err => console.error('An error occurred',err));
2.如果要在打开之前判断是否安装了相应的应用,调用:
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参数可以是其他类型的,比如一个地理位置(形如"geo:37.484847,-122.148386"或是一个通讯录名片,只要是可以通过{@code Intent.ACTION_VIEW}打开的即可。
注:对于web链接来说,协议头("http://", "https://")不能省略!