React Native Linking跨app的通信方法

IOS

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Linking,
  TouchableHighlight,
  View
} from 'react-native';


class CustomButton extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    url: React.PropTypes.string,
    text: React.PropTypes.string.isRequired,

  };  
  render() {
    return (
       Linking.canOpenURL(this.props.url).then(supported => {
          if (supported) {
            Linking.openURL(this.props.url);
          } else {
            console.log('无法打开该URI: ' + this.props.url);
          }
        }) }>
        {this.props.text}
      
    );
  }
}

class LinkingDemo extends Component {
  componentDidMount() {
    var url = Linking.getInitialURL().then((url) => {
      if (url) {
        console.log('捕捉的URL地址为: ' + url);
      }else{
        console.log('url为空');
      }
    }).catch(err => console.error('错误信息为:', err));
  }
  render() {
    return (
      
        
        
        
        
        
        
        
        
      
    );
  }
}

const styles = StyleSheet.create({
  button: {
    margin: 5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  },
  buttonText:{
    fontSize:20,
  },
});

AppRegistry.registerComponent('LinkingDemo', () => LinkingDemo);

Android

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Linking,
  TouchableHighlight,
  View
} from 'react-native';


class CustomButton extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    url: React.PropTypes.string,
    text: React.PropTypes.string.isRequired,

  };  
  render() {
    return (
       Linking.canOpenURL(this.props.url).then(supported => {
          if (supported) {
            Linking.openURL(this.props.url);
          } else {
            console.log('无法打开该URI: ' + this.props.url);
          }
        }) }>
        {this.props.text}
      
    );
  }
}

class LinkingDemo extends Component {
  componentDidMount() {
    var url = Linking.getInitialURL().then((url) => {
      if (url) {
        console.log('捕捉的URL地址为: ' + url);
      }else{
        console.log('url为空');
      }
    }).catch(err => console.error('错误信息为:', err));
  }
  render() {
    return (
      
        
        
        
        
        
        
        
        
      
    );
  }
}

const styles = StyleSheet.create({
  button: {
    margin: 5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  },
  buttonText:{
    fontSize:20,
  },
});

AppRegistry.registerComponent('LinkingDemo', () => LinkingDemo);

AndroidManifest.xml配置

Linking提供了一个通用的接口来与传入和传出的App链接进行交互。

方法：

1.addEventListener(url,func) 添加一个监听Linking变化的事件

2.removeEventListener(url,func) 删除一个事件监听

3.openURL(url) 尝试使用设备上已经安装的应用打开指定的url 

  http网址：http://www.reactnative.vip

  https网址：https://www.baidu.com

  发短信：smsto:13667377378

打电话：tel:13667377378

发邮件：mailto:[email protected]

发位置：geo:37.484847,-122.148386 这个不一定看地图处理应用而定

打开其他应用监听的意图url

4.canOpenURL 判断设备上是否有已经安装的应用可以处理指定的URL 对于iOS 9以上版本，你还需要在Info.plist中添加LSApplicationQueriesSchemes字段

5.getInitialURL() 如果应用是被一个链接调起的，则会返回相应的链接地址。否则它会返回null。

注：如果要在Android上支持深度链接，请参阅http://developer.android.com/tra ... ml#handling-intents

意图过滤器需要单独列出：


            
        
        
        
        
            

能否通过adb启动activity：adb shell am start -n com.linkingdemo/.MainActivity

测试是否能用url的形式打开app对应的activity：adb shell am start -W -a android.intent.action.VIEW -d "dfy://reactnative.vip/data" com.linkingdemo

IOS

首先我们需要在AppDelegate.m文件中引入RCTLinkingManager.h头文件，那么就需要我们引入相关配置了，关于库的引入默认项目都默认已经配置好的，但是我们需要配置一个库头文件搜索路径