react-native 設(shè)置url scheme (react-navigation)

通過react-navigation設(shè)置打開APP的scheme
react-navigation官網(wǎng)(不知道什么時(shí)候更新了,我還在用1.5.11)[https://reactnavigation.org/docs/en/deep-linking.html]

一、ios

1. 設(shè)置path

(通過如path:"Complaint",則啟動(dòng)的時(shí)候是:你的scheme://Complaint)
配置path(具體語法可以參考官網(wǎng)):

const RouteConfigs = {
Complaint: {
        screen: Complaint,//投訴
        path: 'Complaint',
    }
}

2. 設(shè)置URI Prefix

在react-navigation 入口處添加下面內(nèi)容:

import {Platform} from "react-native";

const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
//...others code 
// 我的是在根目錄下的app.js,<App/> 是我的入口
 <App uriPrefix={prefix} />

3. 在xcode中打開AppDelegate.m文件,如下圖:

AppDelegate.m
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// 在這里添加這句
#import <React/RCTLinkingManager.h>
@implementation AppDelegate
//省略其他的代碼

// 在@end前臺(tái)添加上下面這段
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}
@end
按照?qǐng)D片上的修改

4. 直接在模擬器上測(cè)試

  1. react-native run-ios;
  2. xcrun simctl openurl booted zhlx://Complaint

輸入內(nèi)容回車即可:


image.png

二、Android

1. 對(duì)于Android的話,和ios有點(diǎn)不太一樣,就是需要設(shè)置host,通過在APP入口文件添加的

const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';

有童鞋就已經(jīng)猜出來了。

2. android/app/src/main/AndroidManifest.xml中添加intent-filter;

個(gè)人不懂Android(web前端),所以在使用的時(shí)候遇到了個(gè)坑,如下所示,我將官網(wǎng)讓放的intent-filter放到了一個(gè)intent-filter里面(示例1),結(jié)果運(yùn)行打包什么的都沒問題,但是打包成apk安裝到手機(jī)后才發(fā)現(xiàn)APP的icon沒了,桌面找不到,只能在設(shè)置里面看到,改為(示例2)后才正確使用。

示例1:

 <intent-filter>
                <!--這里是原來就有的-->
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
                <!--這里是react-navigation 讓添加的-->
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data android:scheme="mychat" android:host="mychat"/>
            </intent-filter>

示例2:

 <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"/>
                <data android:scheme="mychat" android:host="mychat"/>
                <!-- 這里結(jié)束 -->
            </intent-filter>

官網(wǎng)截圖:


官網(wǎng)截圖

3.運(yùn)行程序測(cè)試

  • 運(yùn)行 react-native run-android
  • adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/chat/Eric" com.simpleapp

mychat://mychat/chat/Eric 就是在瀏覽器或者其他外部打開并跳轉(zhuǎn)到APP的鏈接;

大家可以對(duì)比參考ios和Android的scheme:

end !

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 持續(xù)更新中...... 一套企業(yè)級(jí)的 UI 設(shè)計(jì)語言和 React 實(shí)現(xiàn)。 https://mobile.ant....
    日不落000閱讀 6,050評(píng)論 0 35
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽明AI閱讀 16,170評(píng)論 3 119
  • react-native.jpeg 本文是基于最新的react-navigation^2.9.1來書寫的。 如果遇...
    掛著鈴鐺的兔閱讀 221,670評(píng)論 131 299
  • 一直以來,喜歡吃肉,水晶包,五花肉,紅燒肉,五花臘肉…… 以上的肉,最好是肥瘦相間的最好吃了。 每每與朋友談?wù)撈鸺t...
    華華雯雯閱讀 352評(píng)論 0 3
  • 春天里,宅在家里好久的我,終于可以走出去,和朋友們一起去武漢周邊爬山了。沿途的車上,裝滿了孩子們快樂的歡笑聲,還有...
    職場(chǎng)妖貓姐閱讀 723評(píng)論 2 6

友情鏈接更多精彩內(nèi)容