IOS - 使用Linking处理APP被外部URL调起的事件和解析URL参数

秒速五厘米 2022-04-25 09:40 325阅读 0赞

参考资料：

[https://blog.csdn.net/sinat\_17775997/article/details/70473988][https_blog.csdn.net_sinat_17775997_article_details_70473988]

[https://www.jianshu.com/p/8f2232da0956][https_www.jianshu.com_p_8f2232da0956]

[http://www.cocoachina.com/ios/20161026/17855.html][http_www.cocoachina.com_ios_20161026_17855.html]

本文主要介绍react-native应用如何处理APP被外部URL调起的事件，并解析URL携带的参数。

## 1、应用间相互跳转简介 ##

在iOS开发的过程中，我们经常会遇到需要从一个应用程序A跳转到另一个应用程序B的场景。这就需要我们掌握iOS应用程序之间的相互跳转知识。

## 2、应用间相互跳转实现原理 ##

在iOS中打开一个应用程序只需要拿到这个应用程序的协议头即可，所以我们只需配置应用程序的协议头即可。

假设有应用A和应用B两个应用，现在需要从应用A跳转到应用B中。

原理：通过设置跳转到应用B的URL Schemes（自定义的协议头），应用B将其自身“绑定”到一个自定义URL Schemes上，就可以从应用A中利用应用B的URL Schemes启动应用B了。

IOS应用在info.plist文件中可以设置URL Schemes（URL types -> URL Schemes）。

（APP可以向手机操作系统注册一个 URL scheme，该 scheme 用于从浏览器或其他应用中启动本应用。）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

## 3、RN端使用Linking处理APP被其注册过的外部 url 调起的情况 ##

这一步，需要考虑两种情况，即

（1）APP未在运行

当APP未在运行状态时，可以使用Linking.getInitialURL()方法来处理外部URL调起的事件。

（2）APP在运行当中

当APP处在运行状态时，Linking.getInitialURL()方法是不会响应外部URL调起事件的。需要执行以下操作：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1][]

首先，是在IOS原生端添加上述代码，这段代码的作用是当APP在运行当中被外部URL调起时，往RN端发送事件。这样RN端的Linking模块就能响应事件了。

然后，RN端就可以监听LinKing的相关事件了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 2][]

样例代码如下：

/**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        Linking,
        TouchableHighlight,
        View,
        ScrollView
    } from 'react-native';
    
    
    import PropTypes from 'prop-types';
    
    
    class CustomButton extends Component {
    
        constructor(props) {
            super(props);
        }
    
        static propTypes = {
            url: PropTypes.string,
            text: 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>
            );
        }
    }
    
    export default class IOSLinkingDemo extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                url: '',
                params: ''
            };
        }
    
        componentDidMount() {
            //Linking.getInitialURL()：APP在运行当中，这个方法是不能处理APP被外部URL调起的情况的。
            Linking.getInitialURL().then((url) => {
                this.handleUrl(url);
            }).catch(err => {
                console.error('错误信息为:', err);
                alert('错误信息为:' + err);
            });
            //要在 App 启动后也监听传入的 App 链接
            Linking.addEventListener('url', this._handleOpenURL);
        }
    
        componentWillMount() {
            Linking.removeEventListener('url', this._handleOpenURL);
        }
    
        _handleOpenURL = (event) => {
            this.handleUrl(event.url);
        };
    
        // 取URL地址参数转为对象
        handleUrl = (url) => {
            if (url) {
                console.log('捕捉的URL地址为: ' + url);
                alert('捕捉的URL地址为: ' + url);
                let urlObj = this.getUrlParamsToJSON(url);
                let params = '';
                if (urlObj) {
                    for (let key in urlObj) {
                        params = params + `${key}=${urlObj[key]}\n`;
                    }
                    this.setState({
                        params: params
                    });
                }
    
            } else {
                console.log('url为空');
                alert('url为空');
            }
        };
    
    
        getUrlParamsToJSON = (url) => {
            var params = {};
            //去除所有空格
            url = url.replace(/\s/ig, '');
            //正则表达式匹配
            url.replace(/([^?&=]+)=([^&]+)/g, (_, key, value) => {
                params[key] = value;
            });
            return params;
        };
    
    
        /**
         * 获取URL的查询参数
         */
        getUrlParamsToMap = (url) => {
            var params = new Map();
            //去除所有空格
            url = url.replace(/\s/ig, '');
            //正则表达式匹配
            url.replace(/([^?&=]+)=([^&]+)/g, (_, key, value) => {
                params.set(key, value);
            });
            return params;
        };
    
    
        render() {
            return (
                <ScrollView style={
       {flex: 1}}>
                    {/*<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={'myrnlinkdemo://'} text="自己打开自己"/>*/}
                    <CustomButton url={'myrnlinkdemo1://'} text="打开myrnlindemo1"/>
                    <Text>
                        url参数：{this.state.params}
                    </Text>
                </ScrollView>
            );
        }
    }
    
    const styles = StyleSheet.create({
        button: {
            margin: 5,
            backgroundColor: 'white',
            padding: 15,
            borderBottomWidth: StyleSheet.hairlineWidth,
            borderBottomColor: '#cdcdcd',
        },
        buttonText: {
            fontSize: 20,
        },
    });

## 4、从 Safari 中调用自定义 URL Schemes ##

在 Xcode 中运行应用，一旦应用被安装，自定义 URL scheme 就会被注册，通过模拟器关闭应用，启动 Safari 在浏览器地址栏输入之前定义的 URL scheme(如下)：

图中设置的URL Schemes为myrnlinkdemo，因此在浏览器当中输入：myrnlindemo://index?page=index。

![2019053110005877.png][]

![20190531100115809.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 3][]

## 5、在RN端可以利用URL传递进来的参数进行自定义处理。 ##

当APP拿到参数对象后，就可以根据自己的业务需求进行自定义处理。比如传递过来page参数为index，就跳转到首页，如果page为其他参数，就跳转到其他页面，以此类推。

[https_blog.csdn.net_sinat_17775997_article_details_70473988]: https://blog.csdn.net/sinat_17775997/article/details/70473988
[https_www.jianshu.com_p_8f2232da0956]: https://www.jianshu.com/p/8f2232da0956
[http_www.cocoachina.com_ios_20161026_17855.html]: http://www.cocoachina.com/ios/20161026/17855.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20220125/f7c40f937db849e099c283233da45b88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 1]: /images/20220125/a485e22a4f8a4f739d5496515bd32deb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 2]: /images/20220125/d409c573f85f46d1ba5e5b60b58b5cde.png
[2019053110005877.png]: /images/20220125/7092def5d4354a96b6228945f1e91285.png
[20190531100115809.png]: /images/20220125/a0a5835d25114fe58cbe94a46ae0b29d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70 3]: /images/20220125/94502879a4954112abd4158f213fde63.png