React Native之API学习Linking跨App的通信方法（适配Android & iOS）

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

Linking API 方法

• addEventListener(url, func)

添加一个监听Linking变化的事件。

• removeEventListener(url, func)

删除一个事件监听。

• openURL(url)

尝试使用设备上已经安装的应用打开指定的url。

• canOpenURL(url)

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

• getInitialURL()

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

Linking url 协议

• http网址：http://www.appblog.cn
• https网址：https://www.baidu.com
• 发短信：smsto:10086
• 打电话：tel:10086
• 发邮件：mailto:test@rnapp.cc
• 发位置：geo:37.484847,-122.148386 这个不一定看地图处理应用而定
• 打开其他应用监听的意图url

Android 自定义 Activity 的 url 协议

如果要在Android上支持深度链接，请参阅：http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

通过意图过滤器intent-filter配置：

<activity
    <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 "rn://rnapp.cc/data” -->
        <data
            android:scheme="rn"
            android:host="rnapp.cc"
            android:pathPrefix="/data"
            />
    </intent-filter>
</activity>

通过adb命令行测试：

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

//测试是否能用url的形式打开app对应的Activity
adb shell am start -W -a android.intent.action.VIEW -d "rn://rnapp.cc/data" cc.rnapp.linkingdemo

iOS 运行配置

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

导入项目库

拖动导入：node_modules\react-native\Libraries\LinkingIOS\RCTLinking.xcodeproj

打开主项目配置 -> Build Phases -> Link Binary With Libraries -> 导入库项目Products目录下的a文件

添加头文件搜索路径

打开主项目配置 -> Build Settings -> Header Search Paths

添加项：$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS（选项为recursive）

范例源码

index.android.js & index.ios.js

/**
 * 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 style={styles.flex} >
                <Text style={styles.title}>Linking跨App通信方法演示</Text>
                <CustomButton url={'http://www.rnapp.cc'}  text="点击打开http网页"/>
                <CustomButton url={'https://www.baidu.com'} text="点击打开https网页"/>
                <CustomButton url={'smsto:10086'}  text="点击进行发送短信"/>
                <CustomButton url={'tel:10086'} text="点击进行打电话"/>
                <CustomButton url={'mailto:test@rnapp.cc'} text="点击进行发邮件"/>
                <CustomButton url={'rn:10000'} text="无法打开的url"/>
                <CustomButton url={'geo:37.484847,-122.148386'} text="点击打开一个地图位置"/>
                <CustomButton url={'rn://rnapp.cc/data'} text="自己打开自己"/>
                <View style={styles.flex} />
                <Text style={styles.author}>Powered by RNAPP.CC</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    button: {
        margin: 5,
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#cdcdcd',
    },
    buttonText:{
        fontSize:18,
    },
    title: {
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 12,
        marginBottom: 8,
        textAlign: 'center',
        fontSize: 20,
        color: '#3BC1FF',
    },
    author: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginBottom: 10,
        textAlign: 'center',
        fontSize: 16,
        color: '#3BC1FF',
    },
});

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