React-native 中Linking组件的实例

import React from 'react';
import ReactNative, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Linking,
  TouchableHighlight,
} from 'react-native';
const CustomButton =React.createClass ({

    propTypes:{
        url:React.PropTypes.string,
    },

    render(){
        return (
            <TouchableHighlight
                style={styles.LinkingButton}
                underlayColor="#a5a5a5"
                onPress={() => Linking.canOpenURL(this.props.url).then(supported => {
                    if(supported){
                        Linking.openURL(this.props.url);
                    }else{
                        console.log('无法打开该URL:'+this.props.url);
                    }
                })} >
                <Text style={styles.buttonText}>{this.props.text}</Text>
            </TouchableHighlight>
        )
    }
})

const ToggleAnimatingActivityIndicator = React.createClass({
componentDidMount() {
    //Linking 相关内容的处理
   var url = Linking.getInitialURL().then((url)=>{
       if(url){
           console.log('捕捉的URL地址为:'+url)
       }
   }).catch((error)=>{console.log('错误信息为:',error)})
 },
render() {
        return(
           <View>
              <CustomButton url={'http://www.lcode.org'} text="点击打开http网页"/>
              <CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
              <CustomButton url={'smsto:15801060000'} text="点击这里发送短信"/>
              <CustomButton url={'tel:15801060000'} text="点击进行打电话"/>
              <CustomButton url={'mailto:376690000@qq.com'} text="点击进行发邮件"/>

           </View>
        )
    }
})

var styles = StyleSheet.create({
    demo: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    text: {
        fontSize: 30
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    LinkingButton:{
        margin:5,
        backgroundColor:'white',
        padding:15,
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#cdcdcd'
    }
});
AppRegistry.registerComponent('AwesomeProject',() => ToggleAnimatingActivityIndicator);

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值