{"id":529,"date":"2023-02-25T15:50:19","date_gmt":"2023-02-25T07:50:19","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=529"},"modified":"2023-04-29T20:41:41","modified_gmt":"2023-04-29T12:41:41","slug":"react-native-api-learning-linking-cross-app-communication-methods-adapted-to-android-ios","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-api-learning-linking-cross-app-communication-methods-adapted-to-android-ios\/","title":{"rendered":"React Native\u4e4bAPI\u5b66\u4e60Linking\u8de8App\u7684\u901a\u4fe1\u65b9\u6cd5\uff08\u9002\u914dAndroid &#038; iOS\uff09"},"content":{"rendered":"<p><code>Linking<\/code>\u63d0\u4f9b\u4e86\u4e00\u4e2a\u901a\u7528\u7684\u63a5\u53e3\u6765\u4e0e\u4f20\u5165\u548c\u4f20\u51fa\u7684App\u94fe\u63a5\u8fdb\u884c\u4ea4\u4e92\u3002<\/p>\n<h3>Linking API \u65b9\u6cd5<\/h3>\n<ul>\n<li><code>addEventListener(url, func)<\/code><\/li>\n<\/ul>\n<p>\u6dfb\u52a0\u4e00\u4e2a\u76d1\u542cLinking\u53d8\u5316\u7684\u4e8b\u4ef6\u3002<\/p>\n<p><!-- more --><\/p>\n<ul>\n<li><code>removeEventListener(url, func)<\/code><\/li>\n<\/ul>\n<p>\u5220\u9664\u4e00\u4e2a\u4e8b\u4ef6\u76d1\u542c\u3002<\/p>\n<ul>\n<li><code>openURL(url)<\/code><\/li>\n<\/ul>\n<p>\u5c1d\u8bd5\u4f7f\u7528\u8bbe\u5907\u4e0a\u5df2\u7ecf\u5b89\u88c5\u7684\u5e94\u7528\u6253\u5f00\u6307\u5b9a\u7684url\u3002<\/p>\n<ul>\n<li><code>canOpenURL(url)<\/code><\/li>\n<\/ul>\n<p>\u5224\u65ad\u8bbe\u5907\u4e0a\u662f\u5426\u6709\u5df2\u7ecf\u5b89\u88c5\u7684\u5e94\u7528\u53ef\u4ee5\u5904\u7406\u6307\u5b9a\u7684URL\uff0c\u5bf9\u4e8eiOS 9\u4ee5\u4e0a\u7248\u672c\uff0c\u4f60\u8fd8\u9700\u8981\u5728Info.plist\u4e2d\u6dfb\u52a0LSApplicationQueriesSchemes\u5b57\u6bb5\u3002<\/p>\n<ul>\n<li><code>getInitialURL()<\/code><\/li>\n<\/ul>\n<p>\u5982\u679c\u5e94\u7528\u662f\u88ab\u4e00\u4e2a\u94fe\u63a5\u8c03\u8d77\u7684\uff0c\u5219\u4f1a\u8fd4\u56de\u76f8\u5e94\u7684\u94fe\u63a5\u5730\u5740\uff0c\u5426\u5219\u5b83\u4f1a\u8fd4\u56denull\u3002<\/p>\n<h3>Linking url \u534f\u8bae<\/h3>\n<ul>\n<li>http\u7f51\u5740\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/www.appblog.cn\">http:\/\/www.appblog.cn<\/a><\/li>\n<li>https\u7f51\u5740\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.baidu.com\">https:\/\/www.baidu.com<\/a><\/li>\n<li>\u53d1\u77ed\u4fe1\uff1asmsto:10086<\/li>\n<li>\u6253\u7535\u8bdd\uff1atel:10086<\/li>\n<li>\u53d1\u90ae\u4ef6\uff1amailto:test@rnapp.cc<\/li>\n<li>\u53d1\u4f4d\u7f6e\uff1ageo:37.484847,-122.148386 \u8fd9\u4e2a\u4e0d\u4e00\u5b9a\u770b\u5730\u56fe\u5904\u7406\u5e94\u7528\u800c\u5b9a<\/li>\n<li>\u6253\u5f00\u5176\u4ed6\u5e94\u7528\u76d1\u542c\u7684\u610f\u56feurl<\/li>\n<\/ul>\n<h3>Android \u81ea\u5b9a\u4e49 Activity \u7684 url \u534f\u8bae<\/h3>\n<p>\u5982\u679c\u8981\u5728Android\u4e0a\u652f\u6301\u6df1\u5ea6\u94fe\u63a5\uff0c\u8bf7\u53c2\u9605\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"http:\/\/developer.android.com\/training\/app-indexing\/deep-linking.html#handling-intents\">http:\/\/developer.android.com\/training\/app-indexing\/deep-linking.html#handling-intents<\/a><\/p>\n<p>\u901a\u8fc7\u610f\u56fe\u8fc7\u6ee4\u5668intent-filter\u914d\u7f6e\uff1a<\/p>\n<pre><code class=\"language-xml\">&lt;activity\n    &lt;intent-filter&gt;\n        &lt;action android:name=&quot;android.intent.action.VIEW&quot; \/&gt;\n        &lt;category android:name=&quot;android.intent.category.DEFAULT&quot; \/&gt;\n        &lt;category android:name=&quot;android.intent.category.BROWSABLE&quot; \/&gt;\n        &lt;!-- Accepts URIs that begin with &quot;rn:\/\/rnapp.cc\/data\u201d --&gt;\n        &lt;data\n            android:scheme=&quot;rn&quot;\n            android:host=&quot;rnapp.cc&quot;\n            android:pathPrefix=&quot;\/data&quot;\n            \/&gt;\n    &lt;\/intent-filter&gt;\n&lt;\/activity&gt;<\/code><\/pre>\n<p>\u901a\u8fc7adb\u547d\u4ee4\u884c\u6d4b\u8bd5\uff1a<\/p>\n<pre><code>\/\/\u80fd\u5426\u901a\u8fc7adb\u542f\u52a8\nactivity\uff1aadb shell am start -n com.linkingdemo\/.MainActivity\n\n\/\/\u6d4b\u8bd5\u662f\u5426\u80fd\u7528url\u7684\u5f62\u5f0f\u6253\u5f00app\u5bf9\u5e94\u7684Activity\nadb shell am start -W -a android.intent.action.VIEW -d &quot;rn:\/\/rnapp.cc\/data&quot; cc.rnapp.linkingdemo<\/code><\/pre>\n<h3>iOS \u8fd0\u884c\u914d\u7f6e<\/h3>\n<p>\u9996\u5148\u6211\u4eec\u9700\u8981\u5728<code>AppDelegate.m<\/code>\u6587\u4ef6\u4e2d\u5f15\u5165<code>RCTLinkingManager.h<\/code>\u5934\u6587\u4ef6\uff0c\u90a3\u4e48\u5c31\u9700\u8981\u6211\u4eec\u5f15\u5165\u76f8\u5173\u914d\u7f6e\uff0c\u5173\u4e8e\u5e93\u7684\u5f15\u5165\u9ed8\u8ba4\u9879\u76ee\u90fd\u9ed8\u8ba4\u5df2\u7ecf\u914d\u7f6e\u597d\u7684\uff0c\u4f46\u662f\u6211\u4eec\u9700\u8981\u914d\u7f6e\u4e00\u4e2a\u5e93\u5934\u6587\u4ef6\u641c\u7d22\u8def\u5f84\u3002<\/p>\n<h4>\u5bfc\u5165\u9879\u76ee\u5e93<\/h4>\n<p>\u62d6\u52a8\u5bfc\u5165\uff1a<code>node_modules\\react-native\\Libraries\\LinkingIOS\\RCTLinking.xcodeproj<\/code><\/p>\n<p>\u6253\u5f00\u4e3b\u9879\u76ee\u914d\u7f6e -&gt; <code>Build Phases<\/code> -&gt; <code>Link Binary With Libraries<\/code> -&gt; \u5bfc\u5165\u5e93\u9879\u76eeProducts\u76ee\u5f55\u4e0b\u7684a\u6587\u4ef6<\/p>\n<h4>\u6dfb\u52a0\u5934\u6587\u4ef6\u641c\u7d22\u8def\u5f84<\/h4>\n<p>\u6253\u5f00\u4e3b\u9879\u76ee\u914d\u7f6e -&gt; <code>Build Settings<\/code> -&gt; <code>Header Search Paths<\/code><\/p>\n<p>\u6dfb\u52a0\u9879\uff1a<code>$(SRCROOT)\/..\/node_modules\/react-native\/Libraries\/LinkingIOS<\/code>\uff08\u9009\u9879\u4e3arecursive\uff09<\/p>\n<h3>\u8303\u4f8b\u6e90\u7801<\/h3>\n<p>index.android.js &amp; index.ios.js<\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    Linking,\n    TouchableHighlight,\n    View\n} from &#039;react-native&#039;;\n\nclass CustomButton extends Component {\n    constructor(props) {\n        super(props);\n    }\n\n    static propTypes = {\n        url: React.PropTypes.string,\n        text: React.PropTypes.string.isRequired,\n\n    };\n\n    render() {\n        return (\n            &lt;TouchableHighlight\n                style={styles.button}\n                underlayColor=&quot;#a5a5a5&quot;\n                onPress={\n                    () =&gt; Linking.canOpenURL(this.props.url).then(supported =&gt; {\n                        if (supported) {\n                            Linking.openURL(this.props.url);\n                        } else {\n                            console.log(&#039;\u65e0\u6cd5\u6253\u5f00\u8be5URI: &#039; + this.props.url);\n                        }\n                    })\n                }&gt;\n                &lt;Text style={styles.buttonText}&gt;{this.props.text}&lt;\/Text&gt;\n            &lt;\/TouchableHighlight&gt;\n        );\n    }\n}\n\nclass LinkingDemo extends Component {\n    componentDidMount() {\n        var url = Linking.getInitialURL().then((url) =&gt; {\n            if (url) {\n                console.log(&#039;\u6355\u6349\u7684URL\u5730\u5740\u4e3a: &#039; + url);\n            } else {\n                console.log(&#039;url\u4e3a\u7a7a&#039;);\n            }\n        }).catch(err =&gt; console.error(&#039;\u9519\u8bef\u4fe1\u606f\u4e3a:&#039;, err));\n    }\n\n    render() {\n        return (\n            &lt;View style={styles.flex} &gt;\n                &lt;Text style={styles.title}&gt;Linking\u8de8App\u901a\u4fe1\u65b9\u6cd5\u6f14\u793a&lt;\/Text&gt;\n                &lt;CustomButton url={&#039;http:\/\/www.rnapp.cc&#039;}  text=&quot;\u70b9\u51fb\u6253\u5f00http\u7f51\u9875&quot;\/&gt;\n                &lt;CustomButton url={&#039;https:\/\/www.baidu.com&#039;} text=&quot;\u70b9\u51fb\u6253\u5f00https\u7f51\u9875&quot;\/&gt;\n                &lt;CustomButton url={&#039;smsto:10086&#039;}  text=&quot;\u70b9\u51fb\u8fdb\u884c\u53d1\u9001\u77ed\u4fe1&quot;\/&gt;\n                &lt;CustomButton url={&#039;tel:10086&#039;} text=&quot;\u70b9\u51fb\u8fdb\u884c\u6253\u7535\u8bdd&quot;\/&gt;\n                &lt;CustomButton url={&#039;mailto:test@rnapp.cc&#039;} text=&quot;\u70b9\u51fb\u8fdb\u884c\u53d1\u90ae\u4ef6&quot;\/&gt;\n                &lt;CustomButton url={&#039;rn:10000&#039;} text=&quot;\u65e0\u6cd5\u6253\u5f00\u7684url&quot;\/&gt;\n                &lt;CustomButton url={&#039;geo:37.484847,-122.148386&#039;} text=&quot;\u70b9\u51fb\u6253\u5f00\u4e00\u4e2a\u5730\u56fe\u4f4d\u7f6e&quot;\/&gt;\n                &lt;CustomButton url={&#039;rn:\/\/rnapp.cc\/data&#039;} text=&quot;\u81ea\u5df1\u6253\u5f00\u81ea\u5df1&quot;\/&gt;\n                &lt;View style={styles.flex} \/&gt;\n                &lt;Text style={styles.author}&gt;Powered by RNAPP.CC&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex: {\n        flex: 1,\n    },\n    button: {\n        margin: 5,\n        backgroundColor: &#039;white&#039;,\n        padding: 15,\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderBottomColor: &#039;#cdcdcd&#039;,\n    },\n    buttonText:{\n        fontSize:18,\n    },\n    title: {\n        justifyContent: &#039;flex-start&#039;,\n        alignItems: &#039;center&#039;,\n        marginTop: 12,\n        marginBottom: 8,\n        textAlign: &#039;center&#039;,\n        fontSize: 20,\n        color: &#039;#3BC1FF&#039;,\n    },\n    author: {\n        justifyContent: &#039;flex-end&#039;,\n        alignItems: &#039;center&#039;,\n        marginBottom: 10,\n        textAlign: &#039;center&#039;,\n        fontSize: 16,\n        color: &#039;#3BC1FF&#039;,\n    },\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; LinkingDemo);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Linking\u63d0\u4f9b\u4e86\u4e00\u4e2a\u901a\u7528\u7684\u63a5\u53e3\u6765\u4e0e\u4f20\u5165\u548c\u4f20\u51fa\u7684App\u94fe\u63a5\u8fdb\u884c\u4ea4\u4e92\u3002 Linking API \u65b9\u6cd5 addE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-529","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=529"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/529\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}