React Native Linking跨app的通信方法

最新推荐文章于 2024-09-14 09:05:45 发布

barnett_y

最新推荐文章于 2024-09-14 09:05:45 发布

阅读量5.2k

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章 31 订阅

订阅专栏

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 (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={() => Linking.canOpenURL(this.props.url).then(supported => {
          if (supported) {
            Linking.openURL(this.props.url);
          } else {
            console.log('无法打开该URI: ' + this.props.url);
          }
        }) }>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

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 (
      <View>
        <CustomButton url={'http://www.reactnative.vip'}  text="点击打开http网页"/>
        <CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
        <CustomButton url={'smsto:13667377378'}  text="点击进行发送短信"/>
        <CustomButton url={'tel:13667377378'} text="点击进行打电话"/>
        <CustomButton url={'mailto:309623978@qq.com'} text="点击进行发邮件"/>
        <CustomButton url={'dfy:888999'} text="无法打开url"/>
        <CustomButton url={'geo:37.484847,-122.148386'} text="点击打开一个地图位置"/>
        <CustomButton url={'dfy://reactnative.vip/data'} text="自己打开自己"/>
      </View>
    );
  }
}

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 (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={() => Linking.canOpenURL(this.props.url).then(supported => {
          if (supported) {
            Linking.openURL(this.props.url);
          } else {
            console.log('无法打开该URI: ' + this.props.url);
          }
        }) }>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

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 (
      <View>
        <CustomButton url={'http://www.reactnative.vip'}  text="点击打开http网页"/>
        <CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
        <CustomButton url={'smsto:13667377378'}  text="点击进行发送短信"/>
        <CustomButton url={'tel:13667377378'} text="点击进行打电话"/>
        <CustomButton url={'mailto:309623978@qq.com'} text="点击进行发邮件"/>
        <CustomButton url={'dfy:888999'} text="无法打开url"/>
        <CustomButton url={'geo:37.484847,-122.148386'} text="点击打开一个地图位置"/>
        <CustomButton url={'dfy://reactnative.vip/data'} text="自己打开自己"/>
      </View>
    );
  }
}

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配置

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.linkingdemo"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "dfy://reactnative.vip/data�� -->
        <data android:scheme="dfy"
              android:host="reactnative.vip"
              android:pathPrefix="/data" />
            </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

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:309623978@qq.com


发位置：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


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


<intent-filter>
            <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "http://www.example.com/gizmos” -->
        <data android:scheme="dfy"
              android:host="reactnative.vip"
              android:pathPrefix="/data" />
            </intent-filter>


能否通过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头文件，那么就需要我们引入相关配置了，关于库的引入默认项目都默认已经配置好的，但是我们需要配置一个库头文件搜索路径