React Native Linking跨app的通訊方法

weixin_34007291發表於2017-04-22
React NativeAPP
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標頭檔案，那麼就需要我們引入相關配置了，關於庫的引入預設專案都預設已經配置好的，但是我們需要配置一個庫標頭檔案搜尋路徑

相關文章